nz-cascader
时间: 2023-07-06 09:34:37 浏览: 255
Angular,Ng-Zorro框架nz-icon静态加载第三方SVG图标示例源代码
nz-cascader 是 Ant Design of Angular 框架中的一个级联选择组件,用于多层级数据的选择。
它的使用方法如下:
1. 在你的 Angular 项目中引入 Ant Design of Angular 框架。
2. 在需要使用 nz-cascader 组件的组件中引入 NzCascaderModule。
```typescript
import { NgModule } from '@angular/core';
import { NzCascaderModule } from 'ng-zorro-antd/cascader';
@NgModule({
imports: [NzCascaderModule]
})
export class YourModule { }
```
3. 在 HTML 模板文件中使用 nz-cascader 标签,并使用 [(ngModel)] 或 (ngModelChange) 来绑定值。
```html
<nz-cascader
[(ngModel)]="selectedValues"
[nzOptions]="options"
(ngModelChange)="onSelectionChange($event)">
</nz-cascader>
```
其中,nzOptions 表示级联选择的选项数据,selectedValues 表示当前选中的值,onSelectionChange($event) 是选项改变时触发的事件处理函数。
以上就是 nz-cascader 组件的基本使用方法。需要注意的是,nz-cascader 的选项数据需要满足一定的格式,具体可以参考 Ant Design of Angular 的文档。
阅读全文