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

我正在尝试从一个端点填充一棵树，该端点返回树结构中的数据，如下图所示（我使用投影从一个具有父子关系的表中获取所有子项）

尽管我做了很多尝试，但我仍然无法渲染树，因为我似乎正确地获取了数据（我相信我仍然需要做一些格式化工作！？）

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

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

我的端点：

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

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

我期望的结果是一棵树：

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

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

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

我在控制台中得到的信息：

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

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

服务。ts:

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

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

组件。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>

---

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

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

getOrganizationUnitTreeData（）：可观察{
返回this.httpClient.get（this.allOrgChildrenUrl.pipe）(
map（结果=>[result]）；
}

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

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

getOrganizationUnitTreeData（）：可观察{
返回this.httpClient.get（this.allOrgChildrenUrl.pipe）(
map（结果=>[result]）；
}

我认为我在这个场景中遇到了问题我认为我在这个场景中遇到了问题