如何用角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模板来找到显示节点名称的正确属性。此外，对于子属性和有子属性，您必须添加一些代码来说明哪个属性包含子属性，并且该属性具有一个内容。所以你的结构是：

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>

HasChildren：

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

孩子们：

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

我已经准备了一个斯塔克布利茨来处理您的数据。

Answer 2

Module
  Feature
    Subfeature
    Privilages

我正试着得到上面的树型。我应该尝试做哪些修改来满足公共子类= (dataitem: any)的要求:可观察的=> of(dataitem.features \##*)；

我试过了，但它要么给了我特权，要么给了我子功能，但不是同时给予两者。

任何帮助都将不胜感激。