时间戳

首页 > 解决方案 > PrimeNG - TreeNodes [] 已填充但为空 TreeTable（Angular 6）

angular - PrimeNG - TreeNodes [] 已填充但为空 TreeTable（Angular 6）

问题描述

信息：PrimeNG TreeTable 文档

我会尽量让这件事变得简单。

目标：用JSON 项目填充的树表：

项目.json

[  
   {  
      "id":1,
      "name": "item1",
      "description":"ServiceItem1",

   },
   {  
      "id":2,
      "name":"item2",
      "description":"ServiceItem2",

   },
   {  
      "id":3,
      "name":"item3",
      "description":"ServiceItem3",

     }
]

项目.ts

export class Item {
    public id: number;
    public name: string;
    public description: string;

}

树节点.ts

export interface TreeNode {
    data?: any;
    children?: TreeNode[];
    leaf?: boolean;
    expanded?: boolean;
}

项目服务.ts

export class BasketItemService {

getAllItems() {
    return this.http.get('http://localhost:4203/assets/items.json');
  }
}

item.component.ts

  items: TreeNode[] = [];

    ngOnInit() {
    this.itemService.getAllItems()
          .subscribe(
            res => {
              this.items = res.json();         
            },
            err => {
              console.log(err);
            }
          );
      }

    }

item.component.html

 <p-treeTable [value]="items" >
    <ng-template pTemplate="header">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
        <tr>
            <td>
                <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler> 
                {{rowData.id}}
            </td>
            <td>{{rowData.name}}</td>
            <td>{{rowData.description}}</td>
        </tr>
    </ng-template>
</p-treeTable>

我得到的是一个修正的填充项目 []列表，没有错误。不过桌子是空的。没有导入或版本不匹配的问题，因为我从他们的站点实现了示例并且它运行良好。

唯一的区别与 JSON 文件有关，在这种情况下，每个对象都以某种方式标记有数据 或我们所在的节点。（此外，在 ngOnInit 方法中，它们确实有

this.items = res.json().data;

这是必须的吗？我的对象是否需要具有严格命名为“数据”的属性？我是否应该根据我的 JSON 修改我的 TreeNode 接口，或者那是必须填写的模式？我错过了什么？

标签： angulartreeprimengtreetable

解决方案

Json 数据不正确。参见下面声明的接口，将 josn 数据绑定到 TreeNodeModel。TreeTable 需要带有子项的数据。有关更多信息，请参阅 Primeng。

export class Item {
    public id: number;
    public name: string;
    public description: string;
}

export class TreeNodeModel{
   expanded: boolean,
   data: Item,
   children: Array<TreeNodeModel>
}

推荐阅读