javascript - Angular 2中的多个复选框

Question

在组件中我定义了复选框

public groceries = [
{ name: 'Seitan', bought: false },
{ name: 'Almond Meal Flour', bought: false },
{ name: 'Organic Eggs', bought: false }
];

在模型中，我将杂货制作为字符串

export class User {
 id: number,
 email: string,
 password: string,
 firstName: string,
 lastName: string,
 groceries: string,
 }

组件.html

<span *ngFor="let grocery of groceries">
        <label>
        <input type="checkbox" name="groceries" [(ngModel)]="user.groceries" 
        [value]="grocery.name">
        {{grocery.name}}
        </label>
      </span>

问题是，当我选择一个复选框时，所有其他复选框都会被选中。我很困惑，无法实现此复选框功能。

Answer 1

您将多个复选框绑定(bind)到同一个user.groceries。

将它们绑定(bind)到 grocery 的属性(*ngFor 的迭代变量)，或者创建另一个数组，将每个复选框绑定(bind)到不同的数组条目。

  <span *ngFor="let grocery of groceries">
    <label>
    <input type="checkbox" name="groceries" [(ngModel)]="grocery.isChecked" 
    {{grocery.name}}
    </label>
  </span>

或

checkedGroceries = new Array(groceries.length);

  <span *ngFor="let grocery of groceries; let i=index">
    <label>
    <input type="checkbox" name="groceries" [(ngModel)]="checkedGroceries[i]" 
    {{grocery.name}}
    </label>
  </span>

您不需要[值]。该值已由 [(ngModel)]="..."

分配