如何处理mat-checkbox选中与取消选中事件并获取状态值

模板层调整 #

你现有代码中阻止复选框点击事件冒泡的逻辑是正确的，可以避免点击复选框时触发mat-option默认选中、自动关闭自动补全面板的问题，仅需要修改change事件的传参，把组件原生事件对象传入处理函数即可，修正后完整模板代码如下：

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option
    *ngFor="let data of filteredData | async"
    [value]="data"
    [disabled]="isDisable(data)"
  >
    <div (click)="optionClicked($event, data)">
      <mat-checkbox
        [checked]="data.selected"
        (change)="toggleSelection($event, data)"
        (click)="$event.stopPropagation()"
        [disabled]="isDisable(data)"
      >
        {{ data.item }}
      </mat-checkbox>
    </div>
  </mat-option>
</mat-autocomplete>

组件逻辑层实现 #

在TS代码中引入MatCheckboxChange类型定义，通过事件对象直接获取当前复选框的选中状态，不需要手动推断状态，示例代码如下：

import { MatCheckboxChange } from '@angular/material/checkbox';

// 组件内其他业务逻辑...

toggleSelection(event: MatCheckboxChange, data: any): void {
  // 直接获取当前状态：true 为选中，false 为未选中
  const currentChecked = event.checked;
  // 同步更新数据源中对应项的选中标记
  data.selected = currentChecked;

  // 按状态处理对应业务逻辑
  if (currentChecked) {
    // 选中逻辑：例如将当前项加入已选列表、触发选中后的接口请求等
    console.log('选中项取值：', data);
  } else {
    // 取消选中逻辑：例如将当前项从已选列表移除、重置关联状态等
    console.log('取消选中项取值：', data);
  }
}

事件处理注意事项 #

• 禁止用click事件替代change事件处理选中逻辑：click事件触发时机早于checkbox内部状态更新，且键盘操作（按空格键切换选中）不会触发click事件，会导致状态获取不同步的问题，所有选中状态变更逻辑必须绑定在change事件上
• 必须保留(click)="$event.stopPropagation()"配置：如果删除该配置，点击复选框时事件会冒泡到外层mat-option，触发自动补全组件的默认选中行为，导致面板自动关闭，破坏多选交互体验
• 如果业务需要自定义选中/未选中对应的映射值（比如选中传1、未选中传0），不需要修改checkbox原生配置，直接在toggleSelection方法中根据currentChecked的布尔值做映射即可
• 如果需要获取全量已选项，建议单独维护一个已选数组，每次触发toggleSelection时对数组做增删操作，比每次遍历全量数据过滤选中项的性能更好

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