pre-selected multiple checkbox list in angular

Question

i return list in and show them in a checkbox list .

<div class="col-sm-12" *ngIf="ControllerModel">
  <div *ngFor="let controller of ControllerModel" class="panel col-md-6 col-lg-6 col-xs-6">
    <div class="panel-heading">
      <span>
        {{controller.controllerDisplayName}}
      </span>

    </div>
    <div class="panel-body">
      <div *ngFor="let action of controller.actionsVM" class="col-auto my-1">
        <div class="custom-control custom-checkbox mr-sm-2">
          <input type="checkbox" (change)="onChange($event,controller.controllerName,action.name)" class="custom-control-input">
          <label class="custom-control-label" for="customControlAutosizing">{{action.displayName}}</label>
        </div>
      </div>
    </div>
  </div>
</div>

The user chooses the checkbox and saves in the database.

When the page is loaded, a list of user selections is taken from the database.

I want to change the checkboxes that the user has selected and fetched from the database to their chosen state.

Sample Code

How should I do this?

Answer 1

我也遇到了这个问题，只是添加了cheched属性[checked] =“ isChecked（item）”

Answer 2

One solution is pass checked property and check for it in OnInit function:

Put in your app.component.html:

<input type="checkbox" [checked]="action.checked" (change)="onChange($event,controller.controllerName,action.name)" class="custom-control-input">

Your app.component.ts will be like this:

import { Component, OnInit } from '@angular/core';
import{Controllermodel} from './controllermodel';
import {AccessModel} from './access-model';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  ControllerModel:Controllermodel[]=[];
  SelectedModel:Controllermodel[]=[];
  accessModel:AccessModel;
  PushAccessModel:AccessModel[]=[];

constructor(){
  this.ControllerModel=
  [{
    controllerName:"c1",
    controllerDisplayName:"c1",
    ControllerId:"c1",
    actionsVM:[
      { 
         displayName:"a1",
         name:"a1",
          metaData:"a1",},
          { 
         displayName:"a2",
         name:"a2",
          metaData:"a2",},
          { 
         displayName:"a3",
         name:"a3",
          metaData:"a3",}

          ]
      },
      {
    controllerName:"c2",
    controllerDisplayName:"c2",
    ControllerId:"c2",
    actionsVM:[{ 
         displayName:"ac1",
         name:"ac1",
          metaData:"ac1",},
          { 
         displayName:"ac2",
         name:"ac2",
          metaData:"ac2",},
          { 
         displayName:"ac3",
         name:"ac3",
          metaData:"ac3",},
          { 
         displayName:"ad4",
         name:"ad4",
          metaData:"ad4",},
          ]
      }];

this.SelectedModel=
  [{
    controllerName:"c1",
    controllerDisplayName:"c1",
    ControllerId:"c1",
    actionsVM:[
      { 
         displayName:"a1",
         name:"a1",
          metaData:"a1",}       
          ]
      },
      {
    controllerName:"c2",
    controllerDisplayName:"c2",
    ControllerId:"c2",
    actionsVM:[{ 
         displayName:"ac1",
         name:"ac1",
          metaData:"ac1",},
          { 
         displayName:"ac2",
         name:"ac2",
          metaData:"ac2",}
          ]
      }];

}

onChange(event,controllerName:string,actoinName:string)
{
  this.PushAccessModel.push({
    controllerName,
    actoinName
  })
  console.log(this.PushAccessModel)
}

ngOnInit() {
  this.ControllerModel.forEach((controller, index) => {
    controller.actionsVM.forEach(item => {
      item.checked = Boolean(this.SelectedModel[index].actionsVM.find((el) => el.name === item.name ));
    })
  });
}
}

This is your working stackblitz

Hope it works as you want!

Answer 3

You can also use [checked]="isChecked(action)" into app.component.html and check it like this:

isChecked(item) {
    let isChecked = false;
    this.SelectedModel.forEach(function (controller, index) {
      controller.actionsVM.forEach(function (el) {
        if (el.name === item.name) {
          isChecked = true
        };
      });
    });
    return isChecked;
  }

Here is your new stackblitz