Angualr：列表中展示树状结构，节点可展开、编辑、新增、添加下级

下面展示如何在列表中展示一个树状结构，能新增节点、编辑节点、新增下级：

首先列表上方是新增按钮，点击后调用新增方法：

<div class="table-header">
    <button nz-button nzType="info" (click)="addOrEditDept(1)">新增</button>
</div>

新增一级节点、新增下级和编辑节点的方法是共用的，通过传参数不同来进行不同操作：

public addOrEditDept(type: number, target?: DeptServiceNs.DeptItemModel) {
    this.targetDept = target;
    this.tabPageType = type;
    if (type === TabPageType.EditPage) {   // 判断是新增操作还是编辑操作
      this.addOrEditName = target.name;
    }
  }

新增、编辑页面上的保存按钮上的方法： 

public editOrAddSubmit() {
    if (this.addOrEditName.length === 0) {
      this.messageService.showToastMessage('请输入部门名称', 'warning');
      return;
    }
    if (this.tabPageType === TabPageType.EditPage) {
      this.updateDept(this.targetDept, this.addOrEditName);      // 1、调用编辑方法，调接口传参即可，此处省略
    } else if (this.tabPageType === TabPageType.AddPage) {
      this.addDept(this.addOrEditName, this.targetDept);         // 2、调用新增方法，调接口传参即可，此处省略
    } else {
      return;
    }
  }

以上是编辑和新增的方法的调用，这两个方法在接下来的列表中也同样被用到，接下来是列表的写法（这是一个最低层级为三级的简单列表）：

<nz-table nzSize="small" [nzShowPagination]="false" [nzData]="deptDataList" 
   [nzBordered]="true" [nzLoading]="loading">
        <thead>
          <tr>
            <th [nzWidth]="'60%'">部门名称</th>
            <th [nzWidth]="'40%'">操作</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let oneLevel of deptDataList;trackBy:trackById;">
            <tr>
              <td>
                <i class="anticon anticon-plus-square-o" (click)="expandDepts(oneLevel)"
                  *ngIf="oneLevel.leaf === 0 && !oneLevel.expand"></i>
                <i class="anticon anticon-minus-square-o" (click)="expandDepts(oneLevel)"
                  *ngIf="oneLevel.leaf === 0 && oneLevel.expand"></i>
                <span>{{oneLevel.name}}</span>
              </td>
              <td>
                <span class="operate-text" (click)="addOrEditDept(2,oneLevel)">
                  编辑</span>
                <span class="operate-text" (click)="deleteDept(oneLevel)">删除</span>
                <span class="operate-text" (click)="addOrEditDept(1,oneLevel)">
                  添加下级</span>
              </td>
            </tr>
            <ng-container *ngIf="oneLevel.expand && oneLevel.children">
              <ng-container *ngFor="let twoLevel of 
                oneLevel.children;trackBy:trackById;">
                <tr>
                  <td [ngStyle]="{paddingLeft:'30px'}">
                    <i class="anticon anticon-plus-square-o" 
                       (click)="expandDepts(twoLevel)"
                      *ngIf="twoLevel.leaf === 0 && !twoLevel.expand"></i>
                    <i class="anticon anticon-minus-square-o" 
                        (click)="expandDepts(twoLevel)"
                      *ngIf="twoLevel.leaf === 0 && twoLevel.expand"></i>
                    <span>{{twoLevel.name}}</span>
                  </td>
                  <td>
                    <span class="operate-text" (click)="addOrEditDept(2,twoLevel)">
                      编辑</span>
                    <span class="operate-text" (click)="deleteDept(twoLevel,oneLevel)">
                      删除</span>
                    <span class="operate-text" (click)="addOrEditDept(1,twoLevel)">
                      添加下级</span>
                  </td>
                </tr>
                <ng-container *ngIf="twoLevel.expand && twoLevel.children">
                  <ng-container *ngFor="let threeLevel of 
                     twoLevel.children;trackBy:trackById;">
                    <tr>
                      <td [ngStyle]="{paddingLeft:'60px'}">
                        <span>{{threeLevel.name}}</span>
                      </td>
                      <td>
                        <span class="operate-text" (click)="addOrEditDept(2,threeLevel)">
                           编辑</span>
                        <span class="operate-text" 
                           (click)="deleteDept(threeLevel,twoLevel)">
                           删除</span>
                      </td>
                    </tr>
                  </ng-container>
                </ng-container>
              </ng-container>
            </ng-container>
          </ng-container>
        </tbody>
      </nz-table>

列表数据源是deptDataList，是我们在component.ts文件中调用后端接口得到的数据，通过 *ngFor 遍历这个表格，每个一级节点的数据用oneLevel （将deptDataList中每个节点的数据命名为oneLevel ）暂存，然后再对每个节点的数据进行编辑就变得简单得多了！

同样的，所有二级节点的数据 twoLevel 是从一级节点中遍历出来的，三级节点的数据 threeLevel 又是从二级节点中遍历出来的，我们要做的就是先判断当前操作的节点是否有子节点children ，而且是否被展开即可！