Angular 无法在素描树组件中显示数据

我的目标是使用这个组件简单地创建一个treeview

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

TS:

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

this.rootDetails

HTML:

---

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

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

{{node.title}

---

在上面的代码中，

title

是json键，我想用它显示在我的树中。

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

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

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

{{node.title}

在上面的代码中，

title

是json键，我想用它显示在我的树中。

loadData（）{
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);
    });
 }

this.loadDataService.getLazyFiles(
这个.URL，
（答复：任何）=>{
this.config.nodes=response.map（（elem）=>{
标签：`${elem.title}\u MyValue`，
数据：elem.id，
“expandedIcon”：“打开fa文件夹”，
“collapsedIcon”：“fa-fa文件夹”，
叶：错，
类型：“1”，
});
}，（错误）=>{
console.log（错误）；
});
}

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

附：包括代码，以便帮助查找参考资料。

loadData（）{
this.loadDataService.getLazyFiles(
这个.URL，
（答复：任何）=>{
this.config.nodes=response.map（（elem）=>{
标签：`${elem.title}\u MyValue`，
数据：elem.id，
“expandedIcon”：“打开fa文件夹”，
“collapsedIcon”：“fa-fa文件夹”，
叶：错，
类型：“1”，
});
}，（错误）=>{
console.log（错误）；
});
}

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

---

p.S包括代码，以便帮助查找引用。

在本例中，您将结果声明为数组

    rootDetails: TreeNode[];

但根据后面的解释，您输入到

[value]

中的内容不是数组。 因此，转向

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

---

相反，将执行我假设的技巧。

在这个特定的例子中，您将结果声明为数组

    rootDetails: TreeNode[];

但根据后面的解释，您输入到

[value]

中的内容不是数组。 因此，转向

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

---

你的服务返回的数据是什么样子的？您好，我现在已经把数据添加到问题中了，希望它有帮助：）好的，那么你正试图将一个对象分配给

TreeNode

数组，因此出现了错误消息。哦……谢谢：你知道解决这个问题的另一种方法吗？是的。或者你可以使你的服务返回数据与你的组件中的服务数据转换为与

TreeNode

数组相同的结构。你的服务返回的数据是什么样子的？您好，我已经在问题中添加了数据，希望有帮助：）好的，因此，您试图将一个对象分配给

TreeNode

数组，因此出现了错误消息。噢……谢谢：D您知道解决此问题的其他方法吗？是的。或者，您可以使服务返回数据与组件中的服务数据转换为与

TreeNode

数组相同的结构。