每次点击都无法选中 mat-checkbox答案

【问题标题】：Cannot get selected mat-checkbox on each click每次点击都无法选中 mat-checkbox
【发布时间】：2021-02-16 23:09:15
【问题描述】：

我在表格中使用mat-checkbox，并且我想在每次单击或选中复选框组的更改时调用 selection() 方法。但是，使用默认定义是为了检查是否全部选中。那么，如何调用我的自定义方法并仅获取选定的记录？当前实现还返回以前选择的复选框。

html：以下所有方法都是该组件的默认实现。

<ng-container matColumnDef="select">
  <th mat-header-cell *matHeaderCellDef>

    <!-- header -->
    <mat-checkbox (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && !isAllSelected()">
    </mat-checkbox>
  </th>

  
  <!-- rows -->
  <td mat-cell *matCellDef="let row">
    <mat-checkbox (click)="$event.stopPropagation()"
                  (change)="$event ? selection.toggle(row) : null"
                  [checked]="selection.isSelected(row)">
    </mat-checkbox>
  </td>
</ng-container>

ts：

isAllSelected() {
  const numSelected = this.selection.selected.length;
  const numRows = this.data.length;
  return numSelected === numRows;
}


masterToggle() {

  if (this.isAllSelected()) {
    this.selection.clear();
  }
  else {
      this.tableDataSource.forEach(row => this.selection.select(row));
  }
}

//here is the cstom method that I want to call on every selection change
selectionCh(sel) {

}

【问题讨论】：

标签： javascript angular typescript angular-material mat-table

【解决方案1】：

试试这样的

在 html 中：

<!-- rows -->
<td mat-cell *matCellDef="let row">
    <mat-checkbox (click)="selectionCh($event)"
              (change)="$event ? selection.toggle(row) : null"
              [checked]="selection.isSelected(row)">
    </mat-checkbox>
 </td>

在ts中：

selectionCh($event) {
    $event.stopPropagation();
    let value = $event.target.checked;
    /* iterate over the rows to see which ones are selected 
     * and implement your logic
     */
}

【讨论】：