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>

用户选中该复选框并保存在数据库中。

页面加载后，将从数据库中选择用户列表。

我想将用户已选择并从数据库中获取的复选框更改为他们选择的状态。

Sample Code

我应该怎么做？

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

这是您的工作stackblitz

希望它可以按您的意愿工作！

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

这是您的新stackblitz

预先选择的多个复选框列表

3 个答案: