Angular：来自 json 数据的树视图

Question

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

我想做一些类似于Angular js 1 中提供的tree-grid-directive( http://khan4019.github.io/tree-grid-directive/test/treeGrid.html ) 的事情。

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>

这里的“分支”模板在 *ngTemplateOutlet 的帮助下指的是“叶子”模板，反之亦然。所以它允许树“生长”。

完整的、工作的源代码和演示都在这里