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

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

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

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>

有Children:

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

Children:

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

我准备了一个 Stackblitz 可以处理您的数据。

Answer 2

Module
  Feature
    Subfeature
    Privilages

我正在尝试获取上面的树模式。我应该尝试进行哪些修改才能满足要求 public children = (dataitem: any): Observable => of(dataitem.features || dataitem.subFeatures || dataitem.privileges);

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

如有任何帮助，我们将不胜感激。

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

How to populate multilevel KendoTree view with nested JSON data in Angular 5

json

kendo-treeview

kendo-ui-angular2