Angular 7中mat-checkbox设置选中状态无效，求技术解决方案

看起来你遇到的核心问题是同时绑定了formControl和[checked]属性导致的——在Angular的响应式表单体系里，FormControl会完全接管控件的状态（包括是否选中），所以你手动设置的[checked]会被FormControl的当前值直接覆盖，自然不会生效。

问题根源拆解 #

你的代码里每个mat-checkbox都绑定了同一个moduleswidgets.controls['widgets'] FormControl，同时又试图用[checked]来强制设置选中状态。这两种状态控制方式是冲突的：响应式表单的优先级远高于原生属性绑定，所以[checked]的设置会被忽略。

具体解决方案 #

你需要移除[checked]绑定，转而通过FormControl来管理选中状态，分两种场景给出实现方式：

场景1：多个checkbox对应一个多选FormControl（存储选中的ID数组）

如果你的需求是收集所有选中的widgetsmst_pk，可以把moduleswidgets.controls['widgets']设为值为数组的FormControl：

1. 在组件中初始化/更新表单值

   // 假设moduleswidgets是你的FormGroup实例
   ngOnInit() {
     // 从数据源筛选已选中的ID
     const selectedIds = this.module.widgets
       .filter(widget => widget.selected === '1')
       .map(widget => widget.widgetsmst_pk);
     // 更新FormControl的值
     this.moduleswidgets.get('widgets')?.setValue(selectedIds);
   }
   

2. 修改模板代码
   移除[checked]，并绑定value属性让FormControl识别选中项：

   <div *ngFor="let dwidgets of module.widgets">
     <mat-checkbox 
       [formControl]="moduleswidgets.controls['widgets']"
       [value]="dwidgets['widgetsmst_pk']"
       class="example-margin" 
       (change)="selectedWidgets($event,dwidgets['widgetsmst_pk'])"
     >
       {{ dwidgets['wm_widgetname']}}
     </mat-checkbox>
   </div>
   

场景2：每个checkbox对应独立的FormControl（用FormArray管理）

如果需要单独控制每个checkbox的状态，建议用FormArray来管理一组FormControl：

1. 在组件中创建FormArray

   // 假设moduleswidgets是你的FormGroup实例
   ngOnInit() {
     // 根据数据源初始化FormArray，每个控件对应一个checkbox的选中状态
     const widgetControls = this.module.widgets.map(widget => 
       new FormControl(widget.selected === '1')
     );
     this.moduleswidgets.setControl('widgets', new FormArray(widgetControls));
   }
   
   // 方便模板调用的getter
   get widgetsFormArray() {
     return this.moduleswidgets.get('widgets') as FormArray;
   }
   

2. 修改模板代码

   <div *ngFor="let dwidgets of module.widgets; let i = index">
     <mat-checkbox 
       [formControl]="widgetsFormArray.at(i)"
       class="example-margin" 
       (change)="selectedWidgets($event,dwidgets['widgetsmst_pk'])"
     >
       {{ dwidgets['wm_widgetname']}}
     </mat-checkbox>
   </div>
   

关键提示 #

使用Angular响应式表单时，一定要避免混合使用模板驱动属性（比如[checked]、[(ngModel)]）和响应式表单控件，否则极易出现状态冲突。所有控件状态都应该通过FormControl/FormArray/FormGroup来管理。

内容的提问来源于stack exchange，提问作者Mani_MR