預先選擇的多個復選框列表

Question

我返回列表，並在復選框列表中顯示它們。

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

用戶選擇該復選框並保存在數據庫中。

加載頁面后，將從數據庫中獲取用戶選擇的列表。

我想將用戶選擇的復選框更改為從數據庫中獲取的狀態。

樣例代碼

我應該怎么做？

Answer 1

我也遇到了這個問題，只是添加了cheched屬性[checked] =“ isChecked（item）”

Answer 2

一種解決方案是通過檢查的屬性，並在OnInit函數中對其進行檢查：

放入您的app.component.html：

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

您的app.component.ts將如下所示：

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 ));
    })
  });
}
}

這是你的工作突如其來

希望它能如你所願！

Answer 3

您還可以在app.component.html中使用[checked] =“ isChecked（action）”並進行如下檢查：

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

這是您的新堆疊閃電戰