背景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.checkedfalse);}模板文件HTML使用 nz-checkbox-groupnz-checkbox-groupstylewidth:100%;[(ngModel)]options(ngModelChange)detectionStartChange($event, popDetectionStart)/nz-checkbox-group使用 nz-checkbox-wrappernz-checkbox-wrapperstylewidth:100%;(nzOnChange)detectionStartChange($event, popDetectionStart)divnz-rowdivnz-colnzSpan12*ngForlet data of optionslabelnz-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的响应式布局。