当前位置：首页 > news >正文

NG-ZORRO中tree组件的getCheckedNodeList怎么使用

news 2025/7/12 10:42:03

在 NG-ZORRO（Ant Design for Angular）的 Tree 组件中，getCheckedNodeList 方法用于获取当前选中的节点列表（包括半选状态节点）。以下是具体用法和示例：

基本用法
首先，确保你已通过 ViewChild 获取了 Tree 组件的实例（通常是 NzTreeComponent 或 NzTreeSelectComponent）。

模板中定义 Tree

<nz-tree
  #tree
  [nzData]="nodes"
  nzCheckable
  [(nzCheckedKeys)]="checkedKeys"
  (nzCheckBoxChange)="onCheckboxChange($event)"
></nz-tree>

组件中调用方法

import { Component, ViewChild } from '@angular/core';
import { NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  @ViewChild('tree') tree!: NzTreeComponent; // 获取 Tree 实例
  nodes: NzTreeNode[] = [ /* 你的树节点数据 */ ];
  checkedKeys: string[] = []; // 选中的节点 key 数组

  // 获取所有选中的节点（包括半选节点）
  getCheckedNodes(): void {
    const checkedNodes: NzTreeNode[] = this.tree.getCheckedNodeList();
    console.log('Checked Nodes:', checkedNodes);
  }

  // 如果需要仅获取全选节点（忽略半选节点）
  getFullyCheckedNodes(): void {
    const fullyCheckedNodes: NzTreeNode[] = this.tree.getCheckedNodeList(true);
    console.log('Fully Checked Nodes:', fullyCheckedNodes);
  }
}

方法参数说明
getCheckedNodeList(includeHalfChecked?: boolean): NzTreeNode[]

includeHalfChecked（可选，默认 false）:

false：仅返回全选节点（用户明确勾选的节点）。

true：返回全选 + 半选节点（例如父节点因部分子节点被选中而半选）。

关键注意事项
节点数据格式

确保 nzData 中的节点数据正确绑定，且每个节点有唯一的 key。例如：

nodes = [
  new NzTreeNode({
    title: 'Parent',
    key: '1',
    children: [
      { title: 'Child 1', key: '1-1' },
      { title: 'Child 2', key: '1-2' }
    ]
  })
];

动态更新问题

如果节点是异步加载的，调用 getCheckedNodeList 前需确保数据已渲染（可在 setTimeout 或数据加载完成的回调中调用）。

与 nzCheckedKeys 的区别

nzCheckedKeys 是双向绑定的选中 key 数组，而 getCheckedNodeList 返回的是完整的节点对象（包含 title、children 等属性）。

完整示例

// 模板
<button (click)="logCheckedNodes()">打印选中节点</button>

// 组件
logCheckedNodes(): void {
  const allChecked = this.tree.getCheckedNodeList(); // 全选 + 半选
  const fullyChecked = this.tree.getCheckedNodeList(true); // 仅全选
  console.log('All Checked Nodes:', allChecked);
  console.log('Fully Checked Nodes:', fullyChecked);
}