ng-zorro-树结构的高级使用

1.环境

"@angular/core": "~9.1.12", 
"ng-zorro-antd": "^9.3.0",

import { NzButtonModule } from 'ng-zorro-antd/button';

2.动态加载数据

需求：
1.动态加载三级数据
2.第一级，第二级不能选中，第三级可选择
效果图：

<button nz-button (click)="getdata()">获取数据</button>
<nz-tree
    #nzTreeComponent
    *ngIf='nodesAjax.length>0'
    [nzData]="nodesAjax"
    nzCheckable
    nzAsyncData
    (nzExpandChange)="expandChange($event)"
    (nzClick)="dtNodeClick($event)"
    >
</nz-tree>

重点:
1.disableCheckbox：true，设置节点禁用 Checkbox
2.设置第三层节点的isLe

getdata() {
    let arr = [1,2,3];
    arr.forEach((item, index)=>{
      // 重点1：disableCheckbox：true，设置节点禁用 Checkbox
      let obj = {title: '0-'+index, key: '0-'+index, childeren: [], disableCheckbox: true,};
      this.nodesAjax.push(obj);
    })
  }

  dtNodeClick(event) {
    console.log('点击节点: ', event);
  }

  // 展开节点：获取数据
  expandChange(event) {
    console.log('展开-获取数据: ', event);
    if (event.eventName === 'expand') {
      const node = event.node;
      if (node?.getChildren().length === 0 && node?.isExpanded) {
        this.loadNode(event.node).then(data => {
          node.addChildren(data);
        });
      }
    }
  }

  // 模拟从后台取数据
  loadNode(node){
    return new Promise(resolve => {
      let arr = [
        {title: node.key+'-0', key: node.key+'-0', disableCheckbox: true, childeren: []},
        {title: node.key+'-1', key: node.key+'-1', disableCheckbox: true, childeren: []}
      ]
      // 重点2：设置第三层节点的isLeaf=true，可不显示复选框
      if(node.level == 1){
        arr[0].isLeaf = true; 
        arr[0].disableCheckbox = false;
        arr[1].isLeaf = true;
        arr[1].disableCheckbox = false;
      }
      setTimeout(() => { resolve(arr)}, 300)
    })
  }

后续再添加高级功能