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的列表，其复选框将被启用。在我得到结果后，我正在检查条件以检查是否必须启用该复选框。

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

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 属性，而不是使用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>

组件：

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动态启用复选框

1 个答案: