如何使用 Angular 6 从 JSON 数据中实现树视图

Question

我想使用以下来自网络的数据设计一个复选框树结构 API 使用 Angular 6. 如何实现请帮忙。

[
{
    "id": 1,
    "parent_id": 0,
    "Fund_type":"A&P"   
},
{
    "id": 2,
    "parent_id": 1,
    "Fund_type": "On Invoice"
},
{
    "id": 3,
    "parent_id": 2,
    "Fund_type": "Banded packs-Consumer"
},
{
    "id": 4, 
    "parent_id": 2, 
    "Fund_type": "Banded packs-Shopper" 
},....]

其中id=1是根节点，id=2是它的直接子节点，id=3 &4是id=2的直接子节点（可以看parent_id的结构）

谢谢。

Answer 1

您需要按照下面给出的示例更改数据并使用此组件： https://www.npmjs.com/package/ngx-treeview

Answer 2

您可以简单地使用 angular 树视图 https://www.syncfusion.com/angular-ui-components/angular-treeview

如何使用 Angular 6 从 JSON 数据中实现树视图

How to achieve tree view from JSON data using Angular 6

treeview

checkboxtree

angular5

angular6

angular-material-5