使用 angular2 动态启用复选框答案

【问题标题】：Enable checkbox dynamically using angular2使用 angular2 动态启用复选框
【发布时间】：2018-07-07 20:07:03
【问题描述】：

我正在尝试使用“*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>

在我的组件中，我有一个异步调用来获取要启用其复选框的组 ID 列表。得到结果后，我正在检查一个条件以检查是否必须启用复选框。

我想在条件验证后启用复选框。（“在方法中提到的注释”）

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

我想在比较 id 后启用复选框。

请帮忙！

提前致谢。

【问题讨论】：

标签： angular typescript checkbox angular2-mdl

【解决方案1】：

您需要为每个项目拥有 isGroupChecked 属性，而不是拥有全局 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>

组件：

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

希望对你有帮助！

【讨论】：