删除后无法取消选择所有复选框

Question

我有 3 个复选框和一个主复选框可以 select 或取消 select 它们。

主复选框工作正常，直到我从 table 中删除一些行。当一些数据被删除后，我可以选中主复选框以再次 select 它们，但我无法删除 select 它们。这是它的样子：

<table mat-table [dataSource]="serviceTable" #matTableService class="mat-elevation-z8">
  <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th style="width: 200px" mat-header-cell *matHeaderCellDef>
      <mat-checkbox [checked]="selection.hasValue() && isAllSelected()" (change)="toggleAllServices()" [indeterminate]="selection.hasValue() && !isAllSelected()"></mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox [checked]="selection.isSelected(row)" (change)="selection.toggle(row)"> </mat-checkbox>
    </td>
  </ng-container>

selection = new SelectionModel<Services>(true, []);

toggleAllServices(): void {
  console.log(this.selection.selected, 'selected')
  console.log(this.serviceTable, 'services');
  if (this.isAllSelected()) {
    this.selection.clear();
    this.allServicesAreSelected = false;
    return;
  }
  this.selection.select(... this.serviceTable);
  this.allServicesAreSelected = true;
}

isAllSelected(): boolean {
  return this.selection.selected.length === this.serviceTable.length
}

我是这样删除的：

deleteMultipleServices():void {
  const SELECTED_IDS:Array<number> = [];
  for (let item of this.selection.selected) {
    SELECTED_IDS.push(item.id);
  }
  this.serviceTable = this.serviceTable.filter((serviceValue, i) => !SELECTED_IDS.includes(i))
  this.matTableService.renderRows();
}

我的问题是，一旦我删除了一行，我就再也不会进入 if 语句 if (this.isAllSelected()) {，因为 this.serviceTable returns 2 个对象，这是正确的，但是this.selection.selected returns 3个对象，这是错误的，因为我删除了一个。为什么会这样，我该如何解决？

Answer 1

试一次 -

<ng-container matColumnDef="select">
    <th style="width: 200px" mat-header-cell *matHeaderCellDef>
      <mat-checkbox [checked]="selection.hasValue() && isAllSelected()" (change)="$event ? toggleAllServices() : null" 
      [indeterminate]="selection.hasValue() && !isAllSelected()"></mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox [checked]="selection.isSelected(row)" (change)="$event ? selection.toggle(row): null"> </mat-checkbox>
    </td>
  </ng-container>

Answer 2

删除项目后，应清除选择。

这应该能发挥作用：

this.selection.clear();

删除后无法取消选择所有复选框

Not able to deselect all checlboxes, after delete

typescript

angular-material

angular