angular6+ng-zorro实现表格树形数据展示

<nz-table #expandTable [nzData]="listOfMapData">
    <thead>
      <tr>
        <th nzWidth="40%">IDth>
        <th nzWidth="30%">NAMEth>
        <th>COUNTth>
      tr>
    thead>
    <tbody>
      <ng-container *ngFor="let data of expandTable.data">
        <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
          <tr *ngIf="item.parent && item.parent.expand || !item.parent">
            <td
              [nzIndentSize]="item.level * 20"
              [nzShowExpand]="!!item.childKey"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="collapse(mapOfExpandedData[data.key],item,$event)">
              {
    {item.id}}
            td>
            <td>{
    {item.keyName}}td>
            <td>{
    {item.count}}td>
          tr>
        ng-container>
      ng-container>
    tbody>
  nz-table>

import {
      Component, OnInit } from '@angular/core';
import {
      Router, ActivatedRoute, ParamMap } from '@angular/router';

class TreeNodeInterface {
     
  id: string;
  key: string;
  parentId: string;
  keyName: string;
  expand: boolean;
  count: number;
  childKey?: TreeNodeInterface[];
}
@Component({
     
  selector: 'home',
  templateUrl: './home.component.html'
})

export class HomeComponent implements OnInit {
     
  listOfMapData = [
    {
     
      "id": "1-1",
      "keyName": "root",
      "key":"root",
      "count": 2,
      "childKey": [
        {
     
          "id": "1-2",
          "keyName": "key1",
          "key":"key1",
          "count": 3,
          "childKey": [
            {
     
              "id": "1-3",
              "keyName": "key2",
              "key":"key2",
              "count": 2,
              "childKey": null
            }
          ]
        }
      ]
    },
    {
     
      "id": "2-1",
      "keyName": "root2 ",
      "key":"key3",
      "count": 2,
      "childKey": [
        {
     
          "id": "2-2",
          "keyName": "key3",
          "key":"key3",
          "count": 3,
          "childKey": null
        }
      ]
    }
  ];
  mapOfExpandedData = {
     };

  constructor(
  ) {
     

  }

  ngOnInit(): void {
     
    this.listOfMapData.forEach(item => {
     
      this.mapOfExpandedData[item.key] = this.convertTreeToList(item);
    });
  }
  collapse(array: TreeNodeInterface[], data: TreeNodeInterface, $event: boolean): void {
     
    if ($event === false) {
     
      if (data.childKey) {
     
        data.childKey.forEach(d => {
     
          const target = array.find(a => a.key === d.key);
          console.log(target)
          target.expand = false;
          this.collapse(array, target, false);
        });
      } else {
     
        return;
      }
    }
  }

  convertTreeToList(root: object): TreeNodeInterface[] {
     
    const stack = [];
    const array = [];
    const hashMap = {
     };
    stack.push({
      ...root, level: 0, expand: false });

    while (stack.length !== 0) {
     
      const node = stack.pop();
      this.visitNode(node, hashMap, array);
      if (node.childKey) {
     
        for (let i = node.childKey.length - 1; i >= 0; i--) {
     
          stack.push({
      ...node.childKey[i], level: node.level + 1, expand: false, parent: node });
        }
      }
    }

    return array;
  }

  visitNode(node: TreeNodeInterface, hashMap: object, array: TreeNodeInterface[]): void {
     
    if (!hashMap[node.key]) {
     
      hashMap[node.key] = true;
      array.push(node);
    }
  }

}