Angular Material中获取复选框数据及解决状态不更新问题

看起来你遇到了两个核心问题：一是复选框点击后状态锁死，二是选中项的收集逻辑不完整。我来帮你拆解原因并给出修复方案：

问题根源 #

你同时混用了响应式表单的formControlName和模板驱动表单的ngModelChange，Angular的两种表单机制状态管理逻辑冲突，导致复选框的选中状态无法正常同步。另外你的seleteditems方法只做了添加操作，完全没处理取消选中时的移除逻辑。

方案一：推荐的响应式表单写法（自动维护选中状态） #

这种方式让Angular自动帮你管理复选框状态和选中数组，代码最简洁规范：

组件代码 #

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  settings_data = ["one", "two", "three", "four", "five"];
  // 初始化表单控件，默认空数组表示无选中项
  settingsCheckboxValues = new FormControl<string[]>([]);

  constructor() {
    // 可选：监听选中项变化，做你需要的业务逻辑
    this.settingsCheckboxValues.valueChanges.subscribe(selectedItems => {
      console.log('当前选中的所有项：', selectedItems);
      // 这里可以直接把选中项赋值给你的allitems变量
      // this.allitems = selectedItems;
    });
  }
}

模板代码 #

<!-- 如果外层有formGroup，记得把settingsCheckboxValues注册到formGroup里 -->
<div class="settings_head" fxFlex="50" *ngFor="let item of settings_data">
  <!-- 绑定表单控件+设置当前项为复选框的值，Angular会自动同步状态 -->
  <mat-checkbox [formControl]="settingsCheckboxValues" [value]="item">
    {{item}}
  </mat-checkbox>
</div>

方案二：手动管理选中状态（适合无需表单集成的场景） #

如果不需要和表单体系集成，你可以完全手动控制复选框状态和选中数组：

组件代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  settings_data = ["one", "two", "three", "four", "five"];
  allitems: string[] = [];

  onCheckboxChange(item: string, isChecked: boolean) {
    if (isChecked) {
      this.allitems.push(item);
    } else {
      // 取消选中时移除对应项
      this.allitems = this.allitems.filter(i => i !== item);
    }
  }

  // 判断当前项是否被选中，用于同步复选框状态
  isItemChecked(item: string): boolean {
    return this.allitems.includes(item);
  }
}

模板代码 #

<div class="settings_head" fxFlex="50" *ngFor="let item of settings_data">
  <mat-checkbox [checked]="isItemChecked(item)" (change)="onCheckboxChange(item, $event.checked)">
    {{item}}
  </mat-checkbox>
</div>

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