背景

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

核心数据

用于显示多选框

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 },
  ];

数据输出

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

关闭弹窗

关闭弹窗清空选中项

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

模板文件HTML

使用 nz-checkbox-group

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

使用 nz-checkbox-wrapper

<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的响应式布局。