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

时间:2019-07-18 11:23:36

标签: angular typescript material-design

我有一个带有复选框的席子表,该列表已根据API的响应进行了检查,我可以在Submit上检查更多的复选框和click,这很好,但是我遇到了问题设计我没有得到标题复选框来显示所有复选框均已选中。

必须看起来像这样

table with all the checkboxes checked hence the header checkbox is also checked

但即使所有复选框都已选中,它也会显示如下 this looks like this you can check that all the checkboxes are checked

即使选中了一半的复选框,它也无法正常工作,因为它必须像带有复选框的mat-table。

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

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

1 个答案:

答案 0 :(得分:2)

在初始化中,您需要将选定的项目设置如下

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

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

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

在此处查看工作示例

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