Question

我在项目中使用了mat复选框。我尝试使用[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，因此它将选中事件设置为true。但是仍然没有选中该复选框。

有人帮我吗？

Answer 1

在您的module.widgets数组中，向每个实体添加另一个字段，以使其具有布尔值，该布尔值表示是否应检查该实体

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)]。

或者您需要使用form arrays

请考虑阅读forms in Angular，以了解更多信息。

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

2 个答案: