Question

我是棱角分明的新人。我想以角度5创建一个可扩展树。我尝试使用Angular-tree-component和ngx-treeview。但他们的问题是他们需要特定格式的json。是否有任何库读取任何类型的json并创建一个可扩展的树？或者我是否需要以npm模块需要的格式转换我的json？

我想做一些像tree-grid-directive（http://khan4019.github.io/tree-grid-directive/test/treeGrid.html）在角度js 1中提供的东西。

Answer 1

树视图中的要点是递归模板调用。例如：

    <!-- branch -->
    <ng-template let-items="items" #branch>
      <ng-container *ngFor="let item of items">
        <ng-container *ngTemplateOutlet="leaf; context: {item: item}"></ng-container>
      </ng-container>
    </ng-template>
    
    <!-- leaf -->
    <ng-template let-item="item" #leaf>
      <li>
        <span>{{item.content}}</span>
        <ul *ngIf="item.children">
          <ng-container *ngTemplateOutlet="branch; context: {items: item.children}"></ng-container>
        </ul>
      </li>
    </ng-template>

在“ ng”模板的帮助下，这里的“分支”模板引用了“叶子”模板，反之亦然。因此，它可以让树“成长”。

完整的工作源代码和演示是here

Answer 2

我使用https://www.npmjs.com/package/angular4-jsoneditor解决了我的问题。我在查看模式下使用它。

Angular：来自json数据的树视图

2 个答案: