带有动态子视图的Angular TreeView

Question

我需要生成一个具有动态数据的treeView，我正在使用syncfusion组件https://ej2.syncfusion.com/angular/documentation/treeview/getting-started/

我的问题是，我收到的对象不是完整的，而是"孩子"。当你访问通过生成id。所以我只能显示初始类别，但不能关联子类别。

这是app.component.html

<div class="control-section" style="overflow:hidden;">
<div class="col-lg-12">
<div class='col-lg-6 nested-data'>
<div class='content'>
<h4>Categorías</h4>
<ejs-treeview id="tree" #tree [checkedNodes]='checkedNodes' [fields]='fields'>
</ejs-treeview>
</div>
</div>
</div>
</div>

这是app.component .ts

treeData!: object;
public fields = {
dataSource: this.treeData,
id: 'SID',
text: 'Name',
child: 'Children'
};
public showCheckBox = true;
public checkedNodes: string[] = ['70', '1', '88'];



ngOnInit(): void {
if(this.request){
const res = this.service.getCategory(this.request);
if(res){
this.Cats= res;
res.subscribe(tree =>{
this.treeData =  tree.Category
this.fields= {
dataSource: this.treeData,
id: tree.SID,
text: 'Name',
child: 'Children'
};
})

}
}

通过这种方式，我显示了初始类别，但它从不显示子类别，因为它检测到它是一个空数组…现在，我必须单击一个类别以获得id，以便再次调用服务并显示子类别。我不能这样做，因为信息只能从订阅访问，我也不能将其保存为全局变量。

你能帮我吗?

Answer 1

在TreeView分层数据源类型中，您可以使用字段中的子属性映射节点的子节点。但是，为子属性映射的数据源应该与相同的属性集相同。

你可以参考下面的文档来了解更多关于TreeView组件的信息。

https://ej2.syncfusion.com/angular/documentation/treeview/data-binding/分层数据

默认情况下，TreeView呈现需要一个JSON结构形式的数据源。您可以在TreeView中显示任何类型的数据，只要它遵循JSON结构。这是默认的TreeView结构行为。您需要将从服务获得的数据转换为JSON格式。你可以参考下面的博客

如何在Angular 2中使用TypeScript正确地将对象转换为JSON

如果问题仍然存在，共享一个简单的问题复制样本来验证。