可观察（Angular）从 REST API 填充树（NG-ZORRO）

Question

我正在尝试在我的 Angular Frontend 中从返回树结构数据的端点填充树 (NzTree from NG-ZORRO)，如下图所示（我使用 Projections 从具有父子关系的单个表中获取所有子表- same as depicted here)。

尽管我做了很多尝试，但我仍然无法渲染树，而我似乎正确地获取了数据（我相信我还有一些事情要做格式化！？）。

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

我的端点：

我期待的结果是一棵树：

BT
.ETO
..ETO/A
..ETO/M
...ETO/MA
....ETO/MAF
...ETO/MD
.COO
..首席运营官/E
等等……

我在控制台中得到了什么：

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>

Answer 1

通过从我的服务返回数组找到的解决方案，只需将结果放在 [ ] 之间；

  getOrganizationUnitTreeData(): Observable<any> {
    return this.httpClient.get(this.allOrgChildrenUrl).pipe(
      map(result => [result]));
  }