Angular：来自 json 数据的树视图答案

【问题标题】：Angular: tree view from json dataAngular：来自 json 数据的树视图
【发布时间】：2018-08-18 01:03:00
【问题描述】：

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

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

【问题讨论】：

jsoneditoronline.org 是这样的吗？
您不需要格式化，但您的文本必须是有效的 JSON 格式。
我有一个有效的 json，我从休息电话中得到了

标签： angular angular5

【解决方案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 的帮助下，指的是“叶子”模板，反之亦然。所以它允许树“生长”。

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

【讨论】：

【解决方案2】：

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

【讨论】：

另一个模块，可以使用here.