Angular9 NG-ZORRO 9 复选框组合最佳实践

李浚泽2026-06-15 10:33

背景

Angular 9 + NG-ZORRO 9
需要一组复选框,支持:
- 自定义布局(多列显示)
- 获取选中值(直接拿 value 数组,不用遍历)
- 弹窗关闭时一键清空

核心数据

用于显示多选框

typescript 复制代码

options = [
    { label: 'A', value: 1, checked: false },
    { label: 'B', value: 2, checked: false },
    { label: 'C', value: 4, checked: false },
    { label: 'D', value: 8, checked: false },
  ];

数据输出

typescript 复制代码

detectionStartChange(value: number[], popDetectionStart) {
	console.log(value);
}

关闭弹窗

关闭弹窗清空选中项

typescript 复制代码

closeModal() {
    this.options.forEach((item) => item.checked = false);
  }

模板文件HTML

使用 nz-checkbox-group

html 复制代码

<nz-checkbox-group style="width: 100%;" [(ngModel)]="options"
	(ngModelChange)="detectionStartChange($event, popDetectionStart)">
</nz-checkbox-group>

使用 nz-checkbox-wrapper

html 复制代码

<nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="detectionStartChange($event, popDetectionStart)">
	<div nz-row>
		<div nz-col nzSpan="12" *ngFor="let data of options">
		<label nz-checkbox [nzChecked]="data.checked" 
			[nzValue]="data.value">{{data.label}}</label>
		</div>
	</div>
</nz-checkbox-wrapper>

技术总结

nz-checkbox-group和nz-checkbox-wrapper都能实现多选功能，但是核心差异是： nz-checkbox-group输出的数据事整个options，需要遍历options拿到checked为true的选项，并获取其value值，而且不支持nz-zorro的响应式布局； nz-checkbox-wrapper输出的数据直接就是 $1, 2$ 类似的value数组，并且支持nz-zorro的响应式布局。