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

Question

I have used a mat-checkbox in my project. I tried to mark the mat-checkbox as checked by using [checked]="true"

<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>

in the above code dwidgets['selected'] will return 1 and so it will set the checked event as true. But still checkbox was not checked.

Anyone help me on this?

Answer 1

In your module.widgets array add another filed to each entity so it has boolean which refers if this entity should be checked or not

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

Now in your template.html and by using [(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

because you're using a formControl the checked won't work.

you need to update the value of the control and it will update the checkbox accordingly.

but there's another issue here that you're adding the same control for all the checkboxes.

so .. you either remove the formControl and update the data yourself using the change method, or use [(ngModel)] .

or you need to use form arrays

please consider reading forms in Angular to understand more.