[英]Enable checkbox dynamically using angular2
I am trying to display a list of checkboxes using " *ngFor" attribute as follows. 我正在尝试使用“ * ngFor”属性显示复选框列表,如下所示。
<mdl-list>
<mdl-list-item *ngFor="let group of Groups">
<mdl-list-item-primary-content>
<mdl-checkbox mdl-ripple (change)="onChanged($event,group.guid)" [(ngModel)]="isGroupChecked">{{group.group_name}}</mdl-checkbox>
</mdl-list-item-primary-content>
</mdl-list-item>
</mdl-list>
In my component I have an asynchronous call to get a list of group id's whose checkboxes are to be enabled.After I get the result I am checking for a condition to check if the checkbox must be enabled. 在我的组件中,我有一个异步调用以获取要启用复选框的组ID的列表。获得结果后,我正在检查条件以检查是否必须启用复选框。
I want to enable the checkbox after the condition is validated. 我想在条件验证后启用该复选框。 ("at the comment mentioned in the method")
(“在方法中提到的注释中”)
getUserGroupNames() {
this.Groups.forEach(group => {
this.userGroups.groups.forEach(user_group => {
if (group.entity_group_guid == user_group.entity_group_guid) {
console.log(group.entity_group_guid);
//I want to enable the check box after this comparison.
this.isGroupChecked = true;
}
});
});
}
I want to enable the checkbox after I compare the id's. 比较ID后,我想启用该复选框。
Please Help! 请帮忙!
Thanks in advance. 提前致谢。
You need to have isGroupChecked property for each item, instead of having Global isGroupChecked variable. 您需要为每个项目都具有isGroupChecked属性,而不是具有Global isGroupChecked变量。
<mdl-list>
<mdl-list-item *ngFor="let group of Groups">
<mdl-list-item-primary-content>
<mdl-checkbox mdl-ripple (change)="onChanged($event,group.guid)" [(ngModel)]="group.isGroupChecked">{{group.group_name}}</mdl-checkbox>
</mdl-list-item-primary-content>
</mdl-list-item>
Component: 零件:
getUserGroupNames() {
this.Groups.forEach(group => {
this.userGroups.groups.forEach(user_group => {
if (group.entity_group_guid == user_group.entity_group_guid) {
console.log(group.entity_group_guid);
//need to have separate properties.
group.isGroupChecked = true;
}
});
});
}
Hope it helps! 希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.