无法在 PrimeNG 树组件中显示数据答案

【问题标题】：Cannnot display data in PrimeNG tree component无法在 PrimeNG 树组件中显示数据
【发布时间】：2018-08-09 10:05:47
【问题描述】：

我的目标是使用这个https://www.primefaces.org/primeng/#/tree 组件简单地创建一个树视图。

我目前有一个使用这种方法的小服务

TS：

 getMenuDetails(parentID: number) {
   let url = this.serverURL + 'api/Nodes/' + parentID;
   console.log(url);
   return this.http.get(url)
    .map(res =>  {
      return <TreeNode[]>res.json()
    })
 }

我正在像这样在我的组件中调用此服务

TS：

export class TreeViewComponent implements OnInit {
  mainTree: number = 1;
  rootDetails: TreeNode[];

  constructor(private projectService: ProjectRoleService) { }

  ngOnInit() {
    this.projectService.getMenuDetails(this.mainTree)
      .subscribe(res => this.rootDetails = res)
        console.log(this.rootDetails);    
      };

我的问题是我无法在中显示数据

this.rootDetails

HTML：

<p-tree [value]="rootDetails"></p-tree>

错误：

找不到“Wurzel”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到数组等 Iterables。

有谁知道如何解决这个问题？

编辑 1：

这就是我从服务返回的数据的样子

{
    descr: "WurzelNode"
    id: 1
    lvl: 1
    name: "Wurzel"
    parentid: 0
    position: 1
    rootid:1
}

【问题讨论】：

服务返回的数据是什么样的？
您好，我现在已将数据添加到问题中，希望对您有所帮助:)
好的，所以您正在尝试将一个对象分配给TreeNode 的数组，因此出现错误消息。
哦...谢谢 :D 你知道解决这个问题的另一种方法吗？
是的。您可以让您的服务返回与 that 类似的数据，或者您将来自组件中服务的数据转换为与 TreeNode 数组具有相同的结构。

标签： angular typescript frontend primeng

【解决方案1】：

在这种特定情况下，您将结果声明为数组，

    rootDetails: TreeNode[];

但是根据您后来的解释，您输入[value] 的内容不是数组。所以切换到

    this.projectService.getMenuDetails(this.mainTree)
        .subscribe(res => this.rootDetails = [res]

反而会做我假设的伎俩。

【讨论】：

【解决方案2】：

loadData(){
    this.loadDataService.getLazyFiles(
    this.URL,
    (response:any) => {
      this.config.nodes = response.map((elem) => <TreeNode>{

        label : `${elem.title}_MyValue`,
        data: elem.id,
        "expandedIcon": "fa fa-folder-open",
        "collapsedIcon": "fa fa-folder",
        leaf:false,
        type:"1",

      });

    }, (error) => {
      console.log(error);
    });
 }

除了上面提到的模板之外，@Antikhippe 提到的另一种方法是映射 JSON 数据的响应并使用中的指定键创建新对象。

P.S 包括代码，以便帮助寻找参考的人。

【讨论】：

【解决方案3】：

PrimeNg 提供模板功能，允许您使用自定义 json。

<p-tree [value]="files">
    <ng-template let-node  pTemplate="default">
        {{node.title}}
    </ng-template>
</p-tree>

在上面的代码中，title 是 json 键，我想用它来显示在我的树中。

【讨论】：