I've set a goal for myself to create a treeview using the PrimeNG Tree Component.
Currently, I have a small service with the following method:
TypeScript:
getMenuDetails(parentID: number) {
let url = this.serverURL + 'api/Nodes/' + parentID;
console.log(url);
return this.http.get(url)
.map(res => {
return <TreeNode[]>res.json()
})
}
In my component, I call this service like this:
TypeScript:
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);
};
The issue I'm facing is that I can't seem to display the data in
this.rootDetails
HTML:
<p-tree [value]="rootDetails"></p-tree>
Error:
Cannot find a differ supporting object '[object Object]' of type 'Wurzel'. NgFor only supports binding to Iterables such as Arrays.
Any suggestions on how to resolve this?
EDIT 1:
This is what the data returned from the service looks like:
{
descr: "WurzelNode"
id: 1
lvl: 1
name: "Wurzel"
parentid: 0
position: 1
rootid:1
}