角度ngx-来自Json对象错误的树视图:项的文本必须是字符串对象
角度ngx-来自Json对象错误的树视图:项的文本必须是字符串对象
提问于 2021-10-14 06:06:04
这个treeview项目文本在过去的一周里让我很困惑
以下是我如何将这些项加载到树视图中：
ngOnInit(): void {
this.items = this.getItems([JSON.stringify(this.json_obj)]);
}
getItems(parentChildObj: any[]) {
let itemsArray: TreeviewItem[] = [];
parentChildObj.forEach((set: TreeItem) => {
itemsArray.push(new TreeviewItem(set,true))
});
return itemsArray;
}下面是我如何从非嵌套Json文件创建嵌套Json对象：
this.departments.forEach(element => {
if(element.ParentID == 0){
p_counter++;
this.json_obj.push(
{
text: element.DepartmentName ,
value: 'p'+p_counter.toString() ,
children: [],
id: element.DepartmentID.toString() ,
} as never
);
element.DepartmentName = 'fixed';
}
});模板很简单，因为：
<ngx-treeview [items]="items" dir ="rtl"></ngx-treeview>顺便说一句，它创建了一个完美的嵌套，但是它不能读取新TreeviewItem中的对象属性(set，true)；因为它是未定义的。
错误:项的文本必须是新的TreeviewItem中的字符串对象
请帮我弄清楚这件事，我能做些什么来让它起作用？
回答 1
Stack Overflow用户
发布于 2022-09-07 15:00:09
你用过
text: element.DepartmentName ,
value: 'p'+p_counter.toString() ,
children: [],
id: element.DepartmentID.toString()您似乎没有遵循在TreeItem中给出的treeview-item.d.ts接口
export interface TreeItem {
text: string;
value: any;
disabled?: boolean;
checked?: boolean;
collapsed?: boolean;
children?: TreeItem[];
}您应该删除id，因为这不是TreeItem接口的属性。
import { Component,OnInit } from '@angular/core';
import { TreeviewItem } from 'ngx-treeview';
@Component({
selector: 'my-app',
template: `<ngx-treeview [items]="items"></ngx-treeview>`
})
export class AppComponent implements OnInit {
items: TreeviewItem[];
ngOnInit() {
this.items = this.getItems();
}
getItems(){
// fetch api response
// convert response into this format (object can be nested, should contain below keys only with given type)
// {
// text: string;
// value: any;
// disabled ?: boolean;
// checked ?: boolean;
// collapsed ?: boolean;
// children ?: TreeItem[];
// }
const item = new TreeviewItem({
text: 'Children', value: 1, children: [
{ text: 'Baby 3-5', value: 11 },
{ text: 'Baby 6-8', value: 12 },
{ text: 'Baby 9-12', value: 13 }
]
});
return [ item ];
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69565779
复制相关文章
相似问题
腾讯云开发者
