使用angular2动态启用复选框

Question

我正在尝试使用“*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 的列表，其复选框是enabled.After我得到的结果是我正在检查一个条件以检查是否必须启用该复选框。

我想在验证条件后启用复选框。 ("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;
  }
  });
  });
  }

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

请帮忙！

提前致谢。

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

希望对您有所帮助！

使用angular2动态启用复选框

Enable checkbox dynamically using angular2

checkbox

typescript

angular2-mdl

angular