angular Ng-Zrro树形控件异步加载_nz-tree nzasyncdata="true" 啥意思-CSDN博客

本文链接：https://blog.csdn.net/weixin_49050598/article/details/117162550

本文介绍了如何在Angular项目中使用Ng-Zorro库的树形控件进行异步加载数据。通过解析`nzExpandChange`和`nzClick`事件，展示如何在节点点击时获取相关信息，并提供了基本的`loadNode`方法实现，欢迎交流优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个读懂代码也挺简单的

html代码

<nz-tree [nzData]="nodes" nzAsyncData (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"> </nz-tree>

nzExpandChange 是点击展开树节点图标触发事件
nzClick 就不用介绍了吧
点击之后会返回这些
在这里插入图片描述
eventName 就是你触发的事件名 click 和 Expand 下拉

nzEvent事件的js

 nzEvent(event: NzFormatEmitEvent): void {
    if (event.eventName === 'expand') {
      const node = event.node;
      this.basicInformation(event.keys)  // 注意传入的 keys 是个数组
      if (node?.getChildren().length === 0 && node?.isExpanded) {
        this.loadNode().then(data => {  //调用addChildren赋值
          node.addChildren(data);
        });
      }
    }
  }

basicInformation 自己写的获取数据的 js

  basicInformation(node) {
    let nodeType = ''
    if (node) {
      nodeType = node.pop() //拿到的数组取到最后一项
    }
    this.rendererMeta.executeAction({ //内部获取数据方法 
      params: {
        node: nodeType
      },
    }).then(res => {
      console.log(res);
      let nodes = []
      let content = {
        title: '',
        key: '',
        isLeaf: ''
      }
      res.items.forEach(element => {
        content.title = element.properties.name
        content.key = element.id
        content.isLeaf = element.leaf
        nodes.push(content)
        content = {
          title: '',
          key: '',
          isLeaf: ''
        }
      });
      if (node) { //第一层默认不传值 如果没有就一定是 nodesChildren
        this.nodesChildren = nodes
      } else {
        this.nodes = nodes
        console.log(this.nodes);
      }
    })
  }

loadNode代码

loadNode(): Promise<NzTreeNodeOptions[]> {
    return new Promise(resolve => {
      setTimeout(
        () =>
          resolve(this.nodesChildren),//直接成功就返回nodesChildren
        1000
      );
    });
  }