Angular 7 的 mat-table 中的 mat-checkbox 和 mat-checkbox 标头问题

【问题标题】：mat-checkbox and mat-checkbox header issue in mat-table of Angular 7Angular 7 的 mat-table 中的 mat-checkbox 和 mat-checkbox 标头问题
【发布时间】：2019-07-18 11:23:36
【问题描述】：

我有一个带有复选框的 mat-table，它将根据 API 响应进行检查，我可以在提交时检查更多复选框和 click，这工作正常，但我遇到了设计问题我不是获取标题复选框以显示所有复选框均已选中。

应该是这样的

但即使所有复选框都已选中，它也会显示如下

即使已经检查了一半的复选框，它的行为也不会像带有复选框的垫表一样。

以下是我创建的演示的 stackblitz 链接，它显示了相同的问题。

https://stackblitz.com/edit/angular-ebckbl

【问题讨论】：

标签： angular typescript material-design

【解决方案1】：

在初始化时你需要如下设置选中的项目

selection = new SelectionModel<PeriodicElement>(true, ELEMENT_DATA.filter(t=> t.IsAssigned));

当前您将选定的行设置为空数组

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

在这里查看工作示例

https://stackblitz.com/edit/angular-t56fss

【讨论】：

现在即使带有IsAssigned:false 的数据看起来也被选中了复选框
@SuhasMandumale 是的，如果您只需要分配的项目，只需使用它启动 selection，检查更新答案
非常感谢您的帮助，我必须进行一些调整才能使其正常工作，我创建了一个这样的函数SelectedCheckbox(){ this.selection = new SelectionModel(true,this.roles.filter(o=>o.IsAssigned)); } 并调用了ngOnInit()