Angular中如何通过mat-checkbox提交选中值数组？当前仅提交true/null值的问题排查

我懂你遇到的问题了——现在你把所有复选框都绑定到同一个表单控件selectedValue，这就导致每个复选框的勾选状态会互相覆盖，最后只能拿到单个的true或者null，完全不是你想要的选中code组成的数组。下面是一步步的修复方案：

1. 调整表单初始化，给selectedValue设置空数组默认值 #

首先在ngOnInit里，把表单的selectedValue初始化为空数组，这样后续可以直接往里面存选中的code：

ngOnInit(): void {
  this.selectEquipments = this.formBuilder.group({
    id: [this.selectedId],
    selectedValue: [[]] // 初始化为空数组
  });
  this.fetchSelectedItems();
  this.fetchCheckedIDs();
}

2. 修改HTML中的复选框绑定逻辑 #

别再把所有复选框绑到同一个formControlName了，我们给每个复选框绑定自身的选中状态，然后在勾选变化时同步更新选中数组：

<section *ngFor="let item of optionItems.optionalEquipment">
  <mat-checkbox [(ngModel)]="item.selected" (change)="updateSelectedValues()" [value]="item.code">
    {{item.description}} - {{item.code}}
  </mat-checkbox>
</section>

这里要确保optionItems.optionalEquipment里的每个对象都有selected属性（和你的OptionalEquipment模型定义一致），这样双向绑定才能正常工作。

3. 编写更新选中数组的方法 #

替换你原来的changeSelection、fetchSelectedItems、fetchCheckedIDs，用一个方法来统一处理选中状态变化，同步更新表单的selectedValue：

updateSelectedValues() {
  // 过滤出所有被选中的设备code，组成数组
  const selectedCodes = this.optionItems.optionalEquipment
    .filter(item => item.selected)
    .map(item => item.code);
  // 把数组赋值给表单控件
  this.selectEquipments.get('selectedValue')?.setValue(selectedCodes);
}

现在每次勾选或取消勾选复选框，都会自动把选中的code数组同步到表单里。

4. 验证提交结果 #

你的submitForm方法可以保持不变，不过可以加个日志确认一下表单值是否正确：

submitForm() {
  console.log('提交的表单值:', this.selectEquipments.value);
  // 现在selectedValue应该是你想要的数组格式了
  this.apiService.selectEquipment(this.selectEquipments?.value)
    .subscribe(
      (response: any) => {
        this.equipmentsResults = JSON.parse(response);
      },
    );
}

额外小提示 #

• 如果你的项目更偏向Angular响应式表单的规范，也可以用FormArray来管理每个复选框的状态，但对于你的需求来说，上面的方案更简单直接。
• 确保optionItems.optionalEquipment在组件初始化时已经被正确赋值，否则*ngFor不会渲染出复选框。
• 如果selectedItemsList和checkedIDs在代码其他地方没用到，就可以删掉啦，现在不需要它们了。

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