如何根据ID触发Mat Checkbox的change事件并更新状态？

你遇到的问题核心在于：mat-checkbox 是Angular Material封装的组件，并非原生input，直接操作DOM触发change事件无法同步组件内部的状态管理，导致视觉不更新。以下提供两种可行方案：

方案一：推荐使用Angular数据绑定（无DOM操作） #

既然deselectedList是Map，我们可以额外维护一个状态Map来管理每个复选框的选中/禁用状态，通过Angular的数据绑定实现状态与视觉同步，同时正常触发change事件。

1. 组件内定义状态Map并初始化 #

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  deselectedList = new Map<string, any>(); // 你的原Map
  checkboxStates = new Map<string, { checked: boolean; disabled: boolean }>();

  ngOnInit(): void {
    // 初始化每个复选框的默认状态
    this.deselectedList.forEach((_, key) => {
      this.checkboxStates.set(key, { checked: false, disabled: false });
    });
  }

  // 更新复选框状态并触发业务逻辑
  updateCheckbox(key: string) {
    const currentState = this.checkboxStates.get(key)!;
    currentState.checked = !currentState.checked;
    this.checkboxStates.set(key, currentState);
    // 直接调用原change事件绑定的方法
    this.deselectCheck(currentState.checked, key, this.deselectedList.get(key)!);
  }

  // 原有的deselectCheck方法
  deselectCheck(checked: boolean, key: string, value: any) {
    // 你的业务逻辑
  }
}

2. 修改模板绑定状态 #

<div *ngFor="let cus of deselectedList | keyvalue"
     (click)="updateCheckbox(cus.key)">
    {{cus.key}}
    <mat-checkbox id="customer_{{cus.key}}_checkbox"
                  [checked]="checkboxStates.get(cus.key)?.checked || false"
                  [disabled]="checkboxStates.get(cus.key)?.disabled || false"
                  (change)="deselectCheck($event.checked, cus.key, cus.value)">
    </mat-checkbox>
</div>

这种方式完全遵循Angular的响应式设计，无需操作DOM，状态与视图自动同步，也能正常触发业务逻辑。

方案二：直接操作组件实例（不推荐，仅特殊场景使用） #

如果必须通过DOM操作实现，需要获取MatCheckbox的组件实例，而非原生input元素，因为组件内部维护着视觉状态。

1. 获取组件实例并更新状态 #

import { MatCheckbox } from '@angular/material/checkbox';
import { ViewChildren, QueryList } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChildren(MatCheckbox) checkboxes!: QueryList<MatCheckbox>;

  triggerCheckboxChange(key: string) {
    // 根据ID找到对应的MatCheckbox组件
    const targetCheckbox = this.checkboxes.find(cb => cb.id === `customer_${key}_checkbox`);
    if (targetCheckbox) {
      // 切换选中状态
      targetCheckbox.checked = !targetCheckbox.checked;
      // 可选：设置禁用状态
      // targetCheckbox.disabled = true;
      // 手动触发change事件
      targetCheckbox.change.emit({ checked: targetCheckbox.checked });
    }
  }
}

2. 若必须用document.getElementById #

triggerCheckboxViaDOM(key: string) {
  const domElement = document.getElementById(`customer_${key}_checkbox`);
  if (domElement) {
    // 获取MatCheckbox组件实例
    const checkboxInstance = (domElement as any)._elementRef.nativeElement.parentElement.componentInstance;
    if (checkboxInstance) {
      checkboxInstance.checked = !checkboxInstance.checked;
      checkboxInstance.change.emit({ checked: checkboxInstance.checked });
      // 设置禁用：checkboxInstance.disabled = true;
    }
  }
}

为什么你之前的代码失败？ #

你触发的是原生input的change事件，但mat-checkbox的视觉状态由组件内部的checked属性控制，原生事件不会同步组件的内部状态，所以视觉上没有变化。必须直接修改组件实例的状态并手动触发组件的change事件。

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