如何在Angular中点击mat-table行设置对应mat-checkbox的选中状态

核心修改思路 #

你之所以拿不到对应行的复选框实例，是因为行点击事件没有传入当前行的唯一标识，只要通过行数据的唯一字段（你这里用position作为复选框的value，刚好可以用来匹配）找到对应的复选框实例，即可操作选中状态。 #

步骤1：修改HTML模板 #

首先给行点击事件传入当前行数据，同时阻止复选框的点击事件冒泡，避免点击复选框时触发两次状态切换：

<mat-table #table [dataSource]="dataSource" matSort matSortActive="name">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef> Select </mat-header-cell>
    <mat-cell *matCellDef="let element"> 
      <!-- 新增click事件阻止冒泡 -->
      <mat-checkbox #checkBox [value]="element.position" (change)="getCheckbox(checkBox)" (click)="$event.stopPropagation()"></mat-checkbox>
    </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <!-- 点击事件传入当前行row -->
  <mat-row (click)="setCheckedState(row)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

步骤2：实现setCheckedState方法 #

在组件类中添加如下方法，匹配对应复选框并切换状态：

setCheckedState(row: any) {
  // 按行的position匹配对应复选框
  const targetCheckbox = this.checkBox?.find(item => item.value === row.position);
  if (!targetCheckbox) return;
  // 切换选中状态
  targetCheckbox.checked = !targetCheckbox.checked;
  // 复用已有方法更新选中列表
  this.getCheckbox(targetCheckbox);
}

提示：如果你的行数据使用其他字段作为唯一标识，把匹配条件中的row.position替换为对应的字段即可。

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