NG-ZORRO树

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fjh19950514/article/details/83956023

异步数据加载

点击展开节点，动态加载数据，直到执行 addChildren() 方法取消加载状态。

import { Component } from '@angular/core';
import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
 
@Component({
  selector: 'nz-demo-tree-dynamic',
  template: `
    <nz-tree [(ngModel)]="nodes"
             [nzAsyncData]="true"
             (nzExpandChange)="mouseAction('expand',$event)">
    </nz-tree>`
})
export class NzDemoTreeDynamicComponent {
  nodes = [
    new NzTreeNode({
      title   : 'root1',
      key     : '1001',
      children: []
    }),
    new NzTreeNode({
      title   : 'root2',
      key     : '1002',
      children: []
    }),
    new NzTreeNode({
      title: 'root3',
      key  : '1003'
    })
  ];
 
  mouseAction(name: string, e: NzFormatEmitEvent): void {
    if (name === 'expand') {
      setTimeout(_ => {
        if (e.node.getChildren().length === 0 && e.node.isExpanded) {
          e.node.addChildren([
            {
              title: 'childAdd-1',
              key  : '10031-' + (new Date()).getTime()
            },
            {
              title : 'childAdd-2',
              key   : '10032-' + (new Date()).getTime(),
              isLeaf: true
            } ]);
        }
      }, 1000);
    }
  }
}