[英]pre-selected multiple checkbox list in angular
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. 我想将用户选择的复选框更改为从数据库中获取的状态。
How should I do this? 我应该怎么做?
我也遇到了这个问题,只是添加了cheched属性[checked] =“ isChecked(item)”
One solution is pass checked property and check for it in OnInit function: 一种解决方案是通过检查的属性,并在OnInit函数中对其进行检查:
Put in your app.component.html: 放入您的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: 您的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 ));
})
});
}
}
This is your working stackblitz 这是你的工作突如其来
Hope it works as you want! 希望它能如你所愿!
You can also use [checked]="isChecked(action)" into app.component.html and check it like this: 您还可以在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;
}
Here is your new stackblitz 这是您的新堆叠闪电战
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.