带选择的角材料表 - 主切换应首先取消选择

Question

我修改了 ( masterToggle) 原始的Angular Material Table 示例- Stackblitz，以便在选择了一些行后，主切换应该取消选择所有（而不是全选 - 类似于 Gmail 行为）。

它有效，但标题中的主切换复选框无法按预期工作 - 单击它取消选择后 - 逻辑取消选择所选行，但主切换复选框不反映模型值：

[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