如何在Angular 7中选中标记mat-checkbox

Question

我在项目中使用了mat-checkbox。 我尝试使用[checked] =“true”将mat-checkbox标记为已选中

<div *ngFor="let dwidgets of module.widgets">
  <mat-checkbox [formControl]="moduleswidgets.controls['widgets']"
   [checked]="(dwidgets['selected'] == '1')?true:false"
      class="example-margin" (change)="selectedWidgets($event,dwidgets['widgetsmst_pk'])">
   {{ dwidgets['wm_widgetname']}}
</mat-checkbox>

在上面的代码中，dwidgets ['selected']将返回1，因此它将checked事件设置为true。 但仍未选中复选框。

有人帮我这个吗？

Answer 1

在你的module.widgets数组中，为每个实体添加另一个module.widgets因此它有boolean，它指的是是否应该检查这个实体

widgets = [
 { , checked: true},
 { , checked: false},
 { , checked: false}
]

现在在您的template.html并使用[(ngModel)]

<div *ngFor="let dwidgets of module.widgets">
  <mat-checkbox [formControl]="moduleswidgets.controls['widgets']"
   [(ngModel)]="dwigets.checked"
      class="example-margin" (change)="selectedWidgets($event,dwidgets['widgetsmst_pk'])">
   {{ dwidgets['wm_widgetname']}}
</mat-checkbox>

Answer 2

因为你使用的是formControl所以检查不起作用。

您需要更新控件的值，它将相应地更新复选框。

但是这里有另一个问题，你要为所有复选框添加相同的控件。

所以..你要么删除formControl并使用change方法自己更新数据，要么使用[(ngModel)] 。

或者您需要使用表单数组

请考虑阅读Angular中的表格以了解更多信息。