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

问题描述

我正在尝试将嵌套的 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>`

提前感谢您的帮助。

标签： jsonkendo-ui-angular2kendo-treeview

树组件直接只支持节点名称的一个字段。因此，您必须使用节点模板来找到显示节点名称的正确属性。此外，对于 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>

有孩子：

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

孩子们：

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

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

问题描述

解决方案

推荐阅读