一、环境
"@angular/cli": "^9.1.3",
"ng-zorro-antd": "^9.1.0",
二、安装方法+简单的使用
参考文章:https://ng.ant.design/components/tree/zh
简单的使用可以参考ng-zorro-antd的示例
三、遇到的问题
1.怎么获取选中的节点
需求:要获取选中的节点,并传给后台
方法
1.html
重点:设置#treedom
<nz-tree
#treedom
[nzData]="nodes"
nzCheckable
nzMultiple
[nzCheckedKeys]="defaultCheckedKeys"
[nzExpandedKeys]="defaultExpandedKeys"
[nzSelectedKeys]="defaultSelectedKeys"
(nzClick)="nzEvent($event)"
(nzExpandChange)="nzEvent($event)"
(nzCheckBoxChange)="nzEvent($event)"
>
</nz-tree>
<button (click)='getcheckedNodes()'>获取选中的节点</button>
2.ts
重点:
1.@ViewChild(‘treedom’) treedom:any
2.this.treedom.getCheckedNodeList()
import { Component, OnInit, AfterViewInit, ViewChild} from '@angular/core';
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
export class SelcetGoodsComponent implements OnInit {
//重点1:获取dom
@ViewChild('treedom') treedom:any
....
getcheckedNodes(){
// 方法1:获取选中的nodes
console.log('this.checkedNodes: ',this.treedom.getCheckedNodeList());
// 方法2:直接获取到自己写的数据,然后看那些被选中
// 缺点:会获取到所有的数据,数据量很大时不太好
console.log('data:', this.nodes);
}
ngOnInit():void {
this.nodes = [
{
title: '0-0',
key: '0-0',
expanded: true,
children: [
{
title: '0-0-0',
key: '0-0-0',
children: [
{ title: '0-0-0-0', key: '0-0-0-0', isLeaf: true },
{ title: '0-0-0-1', key: '0-0-0-1', isLeaf: true },
{ title: '0-0-0-2', key: '0-0-0-2', isLeaf: true }
]
},
]
},
];
}
}
3.结果
在浏览器上显示的结果: