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

Question

我有 3 个复选框和一个主复选框，用于选择或取消选择它们。

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

<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

返回 2 个对象，这是正确的，但

this.selection.selected

返回 3 个对象，这是错误的，因为我已删除一张。这是为什么？我该如何解决？

Answer 1

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

这应该会产生魔力：

this.selection.clear();

Answer 2

尝试一次 -

<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 3

删除行后，您必须重新分配选择中的空数组，因为选择具有先前的值（意味着选择变量仍具有删除的值）。

在删除方法 (deleteMultipleServices) 内或删除行后更新数据源的位置添加此行：

this.selection = new SelectionModel<Element>(true, []);