PrimeNG – TreeNodes[]已填充但TreeTable为空(Angular 6)

信息。PrimeNG TreeTable doc

我会尽量把它简单化。

目标:树表 JSON itmes.json

items.json

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

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

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

     }
]

item.ts

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

}

TreeNode.ts

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

item.service.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.组件.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接口,或者说这是必须要完成的模式?我缺少什么?

解决方案:

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>
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

使用 javacardx.security.derivation 进行 Javacard 密钥推导 (hmac)

2022-9-9 2:45:20

未分类

根据条件角材动态绑定matSuffix和matPrefix 9。

2022-9-9 2:45:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索