使用ngx树视图的带有动态json的复选框层次结构

Question

我正在尝试使用我的动态json响应来实现ngx树视图类型的UI。但它给我的错误如下：

不可分配给类型树项

下面是我的json:

{
"id": "2",
"parentId": "0",
"value": "banks",
"children": [
{
"id": "54",
"parentId": "2",
"value": "MasterCard",
"children": [
{
"id": "5",
"parentId": "54",
"value": "US branch",
"children": [],
"level": 2,
"deletable": false
},
{
"id": "56",
"parentId": "UK branch",
"value": "Cognition",
"children": [
{
"id": "51",
"parentId": "56",
"value": "Manager dept",
"children": [],
"level": 3,
"deletable": false
},
{
"id": "52",
"parentId": "56",
"value": "Technical dept",
"children": [],
"level": 3,
"deletable": false
}
],
"level": 2,
"deletable": false
}
],
"level": 1,
"deletable": false
},
{
"id": "74",
"parentId": "2",
"value": "e-Zest Banglore",
"children": [],
"level": 1,
"deletable": true
},
{
"id": "75",
"parentId": "2",
"value": "Axis",
"children": [
{
"id": "77",
"parentId": "75",
"value": "Axis india",
"children": [],
"level": 2,
"deletable": false
}
],
"level": 1,
"deletable": false
}
],
"level": 0,
"deletable": false
}

我的组件.ts:

import { TreeviewItem, TreeviewConfig } from 'ngx-treeview';
...
dropdownEnabled = true;
items: TreeviewItem[];
values: number[];
config = TreeviewConfig.create({
hasAllCheckBox: true,
hasFilter: false,
hasCollapseExpand: true,
decoupleChildFromParent: false,
maxHeight: 250
});
ngOninit(){
this.items = this.getHierarchcategories();
}
getHierarchcategories(): TreeviewItem[] {
const companydata = new TreeviewItem({
{
"id": "2",
"parentId": "0",
"value": "e-Zest",
"children": [
{
"id": "54",
"parentId": "2",
"value": "MasterCard",
"children": [
{
"id": "5",
"parentId": "54",
"value": "hi",
"children": [],
"level": 2,
"deletable": false
},
{
"id": "56",
"parentId": "54",
"value": "Cognition",
"children": [
{
"id": "51",
"parentId": "56",
"value": "Technotica 2",
"children": [],
"level": 3,
"deletable": false
},
{
"id": "52",
"parentId": "56",
"value": "Techno3",
"children": [],
"level": 3,
"deletable": false
}
],
"level": 2,
"deletable": false
}
],
"level": 1,
"deletable": false
},
{
"id": "74",
"parentId": "2",
"value": "e-Zest Banglore",
"children": [],
"level": 1,
"deletable": true
},
{
"id": "75",
"parentId": "2",
"value": "e-Zest Pune",
"children": [
{
"id": "77",
"parentId": "75",
"value": "e-Zest Hinjewdi",
"children": [],
"level": 2,
"deletable": false
}
],
"level": 1,
"deletable": false
}
],
"level": 0,
"deletable": false
}
});
return [companydata];
}

我的component.html如下所示：

<ngx-treeview
[config]="config"
[items]="items"
>
</ngx-treeview>

通过运行此代码，我得到了这个错误。我们能用这种json格式实现树状视图吗？谢谢

Answer 1

构造函数new TreeViewItem(item)要求参数item满足接口TreeItem；该接口是：

interface TreeItem {
text: string;
value: any;
disabled?: boolean;
checked?: boolean;
collapsed?: boolean;
children?: TreeItem[];
}

(来源(

这里有两个问题，一个比另一个更容易解决。简单的一点是JSON包含额外的属性，这些属性不是TreeItem接口的一部分。这就是屏幕截图中property id does not exist on interface TreeItem错误的来源。

只有在函数调用中创建对象时，额外的属性才是问题。因此，您可以单独定义JSON，这样错误就会消失。

const myJson = { /** your data here **/ }; 
const companydata = new TreeviewItem(myJson);

不幸的是，现在你会遇到第二个错误，这是一个更困难的错误。接口TreeItem要求树中的每个项都有一个属性value，它确实有，也有一个你没有的属性text。为了传递到TreeviewItem构造函数中，您需要映射JSON，使其在每个节点上都有这个缺失的{text: string}属性。