I am trying to populate a tree (NzTree from NG-ZORRO) in my Angular Frontend from an endpoint returning data in tree structure as in the picture below (I've used Projections to fetch all children from a single table which had parent-child relationships - same as depicted here ).
Despite my many attempts, I am still failing to render the tree whilst it seems I'm getting the data correctly in (I believe I still have something to do for formatting?.).
Working example from NG-ZORRO:
data = [
{
title: 'parent 1',
key: '100',
expanded: true,
children: [
{
title: 'parent 1-0',
key: '1001',
expanded: true,
children: [
{ title: 'leaf', key: '10010', isLeaf: true },
{ title: 'leaf', key: '10011', isLeaf: true },
{ title: 'leaf', key: '10012', isLeaf: true }
]
},
{
title: 'parent 1-1',
key: '1002',
children: [{ title: 'leaf', key: '10020', isLeaf: true }]
},
{
title: 'parent 1-2',
key: '1003',
children: [
{ title: 'leaf', key: '10030', isLeaf: true },
{ title: 'leaf', key: '10031', isLeaf: true }
]
}
]
}
];
My endpoint:
The result I'm expecting as a tree:
BT
.ETO
..ETO/A
..ETO/M
...ETO/MA
....ETO/MAF
...ETO/MD
.COO
..COO/E
etc...
What I am getting in console:
service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { OrganizationUnit } from '../common/organizationunit';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class OrganizationUnitService {
private baseUrl = 'http://localhost:8080/api/v1/organizationUnits';
private allOrgChildrenUrl =
'http://localhost:8080/api/v1/organizationUnits/18?projection=organizationUnitAllChildren';
constructor(private httpClient: HttpClient) {}
getOrganizationUnitTreeData() {
return this.httpClient.get(this.allOrgChildrenUrl).pipe(
map(result => result));
}
}
component.ts
import { Component, OnInit } from '@angular/core';
import { OrganizationUnitService } from 'src/app/services/organizationunit.service';
import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
@Component({
selector: 'app-organization-unit-tree',
templateUrl: './organization-unit-tree.component.html',
styleUrls: ['./organization-unit-tree.component.css'],
})
export class OrganizationUnitTreeComponent implements OnInit {
//data: [];
nzEvent(event: NzFormatEmitEvent): void {
console.log(event);
}
constructor(private organizationUnitService: OrganizationUnitService) { }
ngOnInit() {
this.organizationUnitService
.getOrganizationUnitTreeData()
.subscribe((data) => {
data;
console.log(`data:`);
console.log(data);
});
}
}
component.html
<nz-tree [nzData]="data | async" nzShowLine (nzClick)="nzEvent($event)"></nz-tree>
Solution found by returning array from my service, just put result in between [ ];
getOrganizationUnitTreeData(): Observable<any> {
return this.httpClient.get(this.allOrgChildrenUrl).pipe(
map(result => [result]));
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.