Angular中点击按钮无法将所有复选框设为选中状态的问题排查

我设置了一个按钮，点击后本应将所有复选框设为选中状态，但实际无任何效果，复选框仍保持未选中状态，且控制台无报错信息。请问我哪里出错了？

component.html:

<button mat-raised-button color="primary" (click)="checked()">Set All</button>

<form [formGroup]="form">
    <mat-nav-list *ngFor="let notification of nvm.notifications; let i = index" formArrayName="data">
        <div formGroupName="{{ i }}" fxLayout="row">
            <mat-checkbox formControlName="is_read"></mat-checkbox>
        </div>
    </mat-nav-list>
</form>

component.ts:

ngOnInit(): void {
  this.nvm$ = this.store$.pipe(select(selectNotificationsViewModel));
  this.initializeForm();
  this.load();
}

public get data() {
  return this.form.get('data') as FormArray;
}

initializeForm(): void {
  this.form = this.fb.group({
    data: this.fb.array([]),
  });
}


checked(): void {
  this.nvm$.subscribe((e) => {
    e.notifications.forEach((notification) => {
      this.data.push(
        this.fb.group({
          is_read: this.fb.control({
            value: true,
          }),
          notification_id: this.fb.control(notification.notification_id),
        })
      );
    })
  });
}

错误原因分析 #

你的checked()方法存在两个核心问题：

1. 逻辑方向错误：每次点击按钮都往FormArray里新增表单组，而非修改页面已绑定的表单控件值。页面渲染的是初始nvm.notifications对应的表单，新增的表单组不会在页面上显示，自然看不到选中效果。
2. 订阅管理问题：直接在方法内订阅Observable却未取消订阅，多次点击会产生重复订阅，引发内存泄漏。

修复方案 #

1. 修改checked()方法（核心修复）

直接遍历已存在的FormArray控件，修改is_read的值：

checked(): void {
  // 遍历所有已初始化的表单组，设置is_read为true
  this.data.controls.forEach(control => {
    control.get('is_read')?.setValue(true);
  });
}

2. 确保FormArray已正确初始化（前提条件）

如果load()方法未完成表单初始化，需要在订阅nvm$时同步构建表单：

ngOnInit(): void {
  this.nvm$ = this.store$.pipe(select(selectNotificationsViewModel));
  this.initializeForm();

  // 订阅通知数据，同步初始化表单
  this.nvm$.subscribe(e => {
    // 先清空原有表单，避免重复添加
    while (this.data.length > 0) {
      this.data.removeAt(0);
    }
    // 为每个通知创建表单组
    e.notifications.forEach(notification => {
      this.data.push(
        this.fb.group({
          is_read: this.fb.control(false), // 初始未选中
          notification_id: this.fb.control(notification.notification_id)
        })
      );
    });
  });

  this.load();
}

3. 模板语法优化（可选）

把formGroupName="{{ i }}"改为Angular推荐的属性绑定语法：

<div [formGroupName]="i" fxLayout="row">

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