Angular 2 使用 ngFor 设置和绑定复选框答案

【问题标题】：Angular 2 set and bind checkboxes with a ngForAngular 2 使用 ngFor 设置和绑定复选框
【发布时间】：2016-04-11 12:47:29
【问题描述】：

我有一个这样的数组：

 objectArray = [
        {"name": "Car"},
        {"name": "Bike"},
        {"name": "Boat"},
        {"name": "Plane"}
    ];

还有这样的模板：

<li *ngFor="#obj of objectArray">
   <a href="#" class="small" data-value="option1" tabIndex="-1">
      <input type="checkbox" (change)="expression && expression.value = $event.target.checked ? true : undefind" [ngModel]="expression?.value">
      <label for="">{{ obj.name }}</label>
   </a>
</li>

但检查1个复选框时设置为true。如何单独设置？

【问题讨论】：

标签： typescript angular angular2-ngmodel

【解决方案1】：

我在使用最新版本的 Angular 2 时遇到了一些麻烦。这是我想出的对包含角色名称和布尔值的对象列表进行双向绑定的方法，用于检查角色。

<form [formGroup]="userInfoForm" (ngSubmit)="onSubmit(userInfoForm)">

...

 <input type="hidden" name="roles" formControlName="roles" [(ngModel)]="roleSelections">
 <div *ngFor="let role of roleSelections">
     <input type="checkbox" 
            [value]="role.isChecked" 
            [checked]="role.isChecked" 
            (change)="$event.target.checked ? role.isChecked = true : role.isChecked = false">
       {{role.name}}
 </div>

RoleSelection 只是一个包含两个字段的简单类：

export class RoleSelection {
constructor(
    public name: string,
    public isChecked: boolean)
    { }
}

在组件中，我必须在创建 FormGroup 时声明一个名为 roles 的属性，然后将其绑定到上面 HTML 中的隐藏字段。

    this.userInfoForm = new FormGroup({
        emailAddress: new FormControl(this.userInfo.emailAddress, Validators.required),
        firstName: new FormControl(this.userInfo.firstName, Validators.required),
        middleName: new FormControl(this.userInfo.middleName),
        lastName: new FormControl(this.userInfo.lastName, Validators.required),
        isAdmin: new FormControl(this.userInfo.isAdmin),
        isArchived: new FormControl(this.userInfo.isArchived),
        roles: new FormControl(this.roleSelections)
    });

然后在提交表单后，ngSubmit 方法只需提取它需要的内容：

 private onSubmit(obj: any) {
    if (obj.valid) {
        let account: IUserAccount = {};
        account.id = this.userAccountId;
        account.firstName = obj.controls.firstName.value;
        ...
        ...
        // get list of roles checked via obj.controls.roles.value[i].isChecked etc
        ...
        ...
        // do submission
    }
 }

【讨论】：

您的(change) 可以简化为role.isChecked = $event.target.checked。

【解决方案2】：

我想这就是你想要的：

<li *ngFor="let obj of objectArray">
   <a href="#" class="small" data-value="option1" tabIndex="-1">
<input type="checkbox"  
    (change)="expression && expression[obj.name]=$event.target.checked ? true : undefined"
    [ngModel]="expression && expression[obj.name]">
   </a>
</li>

更新使用(ngModelChange) 通常比(change) 更好，尤其是在使用[ngModel] 时

<input type="checkbox"  
    (ngModelChange)="expression && expression[obj.name]= $event ? true : undefined"
    [ngModel]="expression && expression[obj.name]">

【讨论】：

这适用于将复选框列表绑定到具有角度 2+ 值的数组的 2 方式谢谢！！
很高兴听到。这是一个古老的答案。最好使用(ngModelChange)="expression && expression[obj.name]=$event ? true : null"