您的位置:首页 > 科技 > 能源 > 2023新闻摘抄10条_网页传奇游戏排行榜2014前十名_搜狐三季度营收多少_2024年2月疫情又开始了吗

2023新闻摘抄10条_网页传奇游戏排行榜2014前十名_搜狐三季度营收多少_2024年2月疫情又开始了吗

2025/4/1 20:05:46 来源:https://blog.csdn.net/anxin_wang/article/details/146588171  浏览:    关键词:2023新闻摘抄10条_网页传奇游戏排行榜2014前十名_搜狐三季度营收多少_2024年2月疫情又开始了吗
2023新闻摘抄10条_网页传奇游戏排行榜2014前十名_搜狐三季度营收多少_2024年2月疫情又开始了吗

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

  1. 基本用法
    首先,确保你已通过 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);}
}
  1. 方法参数说明
    getCheckedNodeList(includeHalfChecked?: boolean): NzTreeNode[]

includeHalfChecked(可选,默认 false):

false:仅返回 全选节点(用户明确勾选的节点)。

true:返回 全选 + 半选节点(例如父节点因部分子节点被选中而半选)。

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

确保 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 等属性)。

  1. 完整示例
// 模板
<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);
}

通过以上方法,你可以轻松获取 Tree 组件的选中状态。如果需要进一步处理节点数据,可以通过 NzTreeNode 的 API(如 getParentNode()、getChildren() 等)操作节点关系。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com