每次点击都无法获得选定的垫子复选框

Question

我在 table 中使用 mat-checkbox 并且我想在每次单击或更改复选框组时调用 selection() 方法。但是，使用默认定义来检查是否全部选中。那么，我怎样才能调用我的自定义方法并只获取选定的记录呢？当前实施 returns 以前也选中了复选框。

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) {

}

Answer 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
     */
}

每次点击都无法获得选定的垫子复选框

Cannot get selected mat-checkbox on each click

javascript

typescript

angular-material

angular

mat-table