Question

我将尝试使其尽可能简单。

目标：树表填充了 JSON itmes：

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

我得到的是正确填写的 items [] 列表，没有错误。该表为空。 没有导入或版本不匹配的问题，因为我从他们的site实施了示例，并且效果很好。

唯一的差异与JSON文件相关，在这种情况下，每个对象都以某种方式用 data or what node we're at标记。（ 另外，在ngOnInit方法中，它们确实具有

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

这是必须的吗？我的对象是否需要具有严格命名为“数据”的属性？我是否应该根据我的JSON修改TreeNode接口，或者该模式必须为完整文件？我想念什么？

Answer 1

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

http:Request

PrimeNG-填充了TreeNodes []但空的TreeTable（角度6）

1 个答案: