带选择的 Angular Material 表 - 主切换应首先取消选择

Question

我修改了 (masterToggle) 原来的 Angular Material Table example - Stackblitz这样在选择了一些行之后，主切换应该取消选择所有(而不是选择所有 - 类似于 Gmail 行为)。

它有效，但标题中的主切换复选框没有按预期工作 - 单击它取消选择后 - 逻辑取消选择所选行，但主切换复选框不反射(reflect)模型值:

[checked]="selection.hasValue() && isAllSelected()"

如果表达式的计算结果为 false，我希望主切换复选框不会被选中(见下图)。

我猜它与动画有关。

此处修改示例:Stackblitz

masterToggle() {
    // if there is a selection then clear that selection
    if (this.isSomeSelected()) {
      this.selection.clear();
    } else {
      this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
    }
}

Answer 1

目前您没有在单击复选框时更新 this.selection.selected.length，因此它没有正确更新长度。

您需要显式更改 mat-checkbox 状态，否则它会不断切换自身，所以我使用模板引用 mat-checkbox 取消选中

isSomeSelected() 方法在您单击 mat-cell 时未执行以检查 masterToggle() 条件是否正确您必须触发此方法同时单击 mat-checkbox 检查我的解决方案 我已将此功能添加到更改事件中，以便它可以正常工作

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

我已经修改了你的代码检查这个:https://stackblitz.com/edit/angular-rmqg54-7rjmaj