如何在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中的表格以了解更多信息。