如何使用Angular 5中的嵌套JSON数据填充多级KendoTree视图

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模板来找到用于显示节点名称的正确属性。此外，对于孩子和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>

有孩童：

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

儿童：

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

我已经准备好可以处理您的数据的Stackblitz。