Angular 15结合Angular Material中mat-checkbox选中状态异常及加载时名称消失问题求助

看起来你遇到了两个核心问题：复选框加载时名称频繁消失，以及勾选/取消勾选时control.value始终返回false、状态同步异常。咱们一步步来修复这些问题：

一、修复复选框状态绑定与事件监听问题 #

你的模板和组件逻辑里有几个关键冲突点，导致状态同步失效：

1. 优化模板：移除冗余绑定，添加trackBy解决名称消失 #

mat-checkbox已经通过[formControl]和FormControl双向绑定状态了，手动设置[checked]会和FormControl的状态冲突，同时给ngFor加上trackBy可以避免DOM重复销毁重建导致的名称消失：

修改后的HTML模板：

<div *ngFor="let control of checkboxArray.controls; let i = index; trackBy: trackByIndex">
  <mat-checkbox 
    [formControl]="control" 
    (change)="onCheckedChange(i, $event.checked)"
  >
    {{ checkboxItems[i]?.name }}
  </mat-checkbox>
</div>

在组件类中添加trackBy方法：

trackByIndex(index: number): number {
  return index;
}

• trackBy能让Angular精准跟踪列表项身份，避免渲染时频繁重建DOM，解决加载时名称消失的问题；
• 直接把$event.checked传入事件方法，避免重复获取状态。

2. 修正onCheckedChange逻辑：精准维护lists数组 #

原逻辑中用pop()移除元素是错误的（pop()只会删除数组最后一个元素，和当前操作的复选框无关），同时要基于实际勾选状态更新数组：

修改后的onCheckedChange：

onCheckedChange(index: number, isChecked: boolean) {
  const checkboxItem = this.checkboxItems[index];
  const control = this.checkboxArray.at(index);

  if (!control || !checkboxItem) return;

  // 精准维护lists数组：避免重复添加，精准移除对应ID
  const itemIdStr = checkboxItem.id.toString();
  if (isChecked) {
    if (!this.lists.includes(itemIdStr)) {
      this.lists.push(itemIdStr);
    }
  } else {
    this.lists = this.lists.filter(id => id !== itemIdStr);
  }

  this.sortCheckboxArray();
  this.updateSubscriberGroupsCount();
  // 除非极端异步场景，尽量移除手动变更检测，Angular自动变更检测通常能覆盖
  // this.cdr.detectChanges();
}

二、修复addCheckbox方法的初始状态同步 #

原方法中FormControl和checkboxItem的初始状态没有对齐，导致勾选/取消逻辑完全失效：

addCheckbox(id: number, name: string, checked: boolean) {
  // 用传入的checked参数初始化FormControl，不再固定为false
  const control = new FormControl(checked);
  this.checkboxArray.push(control);

  // 让checkboxItem的checked状态和FormControl初始值同步
  const checkboxItem: SubscribersNotification = { 
    id: id, 
    name: name, 
    checked: checked 
  };
  this.checkboxItems.push(checkboxItem);

  // 初始化时同步lists数组：默认选中的项直接加入
  if (checked) {
    this.lists.push(id.toString());
  }
}

三、问题根源复盘 #

1. control.value始终为false：你手动设置了[checked]="control.value"，又在事件里错误修改control.checked（FormControl的状态存在value属性而非checked），导致FormControl状态完全混乱；
2. 加载时名称消失：ngFor没有trackBy，Angular无法识别列表项身份，频繁销毁重建DOM导致内容丢失；
3. 勾选/取消无效：原addCheckbox固定初始化FormControl为false，且未和checkboxItem.checked同步，事件逻辑也没有正确维护状态。

额外优化建议 #

• 明确定义checkboxArray的类型：checkboxArray: FormArray = new FormArray([])，TypeScript会提供更精准的类型提示；
• 尽量避免手动调用cdr.detectChanges()：Angular的自动变更检测在绝大多数场景下都能正常工作，手动触发容易引入其他渲染问题。

备注：内容来源于stack exchange，提问作者CPK_2011