json - 如何在 Angular 5 中使用嵌套的 JSON 数据填充多级 Kendo Treeview

Question

我正在尝试将嵌套的 JSON 数据填充到多级 KendoTreeView 中。

public nodes: any[] = [{
      "moduleId": 1,
      "moduleName": "Mode",
      "features": [
        {
          "featureId": 2,
          "featureName": "F1",
          "subFeatures": [],
          "privileges": [
            {
              "privilegeId": 2,
              "privilegeName": "P2"
            },
            {
              "privilegeId": 12,
              "privilegeName": "P2E"
            }
          ]
        },
        {
          "featureId": 3,
          "featureName": "F2",
          "subFeatures": [
            {
              "featureId": 4,
              "featureName": "F21",
              "subFeatures": [],
              "privileges": [
                {
                  "privilegeId": 4,
                  "privilegeName": "P4"
                }
              ]
            }
          ],
          "privileges": [
            {
              "privilegeId": 3,
              "privilegeName": "P3"
            }
          ]
        }
    ]
}]

使用此代码我只能看到一层树。不确定如何在这种情况下使用 [hasChildren]="hasChildren"。

`到目前为止，我已经尝试过在 Kendo TreeView 中填充一些数据。
数据看起来像这样。

<kendo-treeview [nodes]="node"
                [textField]="[ 'moduleName','featureName']"
                [childrenField]="['features']"
                kendoTreeViewExpandable
                kendoTreeViewHierarchyBinding>
</kendo-treeview>`

提前感谢您的帮助。

Answer 1

树组件仅直接支持节点名称的一个字段。因此，您必须使用 Node 模板来查找用于显示节点名称的正确属性。
此外，对于 children 和 haschildren，您必须添加一些代码来说明哪个属性包含子项以及该属性是否具有内容。
所以你的结构是:

Module
  Feature
    Subfeature

每个级别都必须由自定义代码支持。

模板:

 <kendo-treeview
     textField="moduleName"
     [nodes]="nodes"
     [children]="children"
     [hasChildren]="hasChildren"
 >
 <ng-template kendoTreeViewNodeTemplate let-dataItem>
        {{dataItem.moduleName || dataItem.featureName}}
    </ng-template>
 </kendo-treeview>

有 child :

 public hasChildren = (dataitem: any): boolean => !!dataitem.features || !!dataitem.subFeatures;

children :

 public children = (dataitem: any): Observable<any[]> => of(dataitem.features || dataitem.subFeatures);

我准备了一个适用于您的数据的 Stackblitz。