Question

我的目标是使用此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仅支持绑定到诸如Arrays之类的Iterables。

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

编辑1：

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

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

Answer 1

PrimeNg提供了模板功能，可让您使用自定义json。

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

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

Answer 2

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

    rootDetails: TreeNode[];

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

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

相反，它将实现我认为的窍门。

Answer 3

body

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

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

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

3 个答案: