复选框 ngFor Angular2 上的双向绑定

Question

我正在创建一个 Angular2 项目，但我遇到了复选框的双向绑定问题。

我有一个名为 listItem 的 class 和这样的列表：

export class ListItem {
  public count: number;
  public value: string;
  public checked: boolean;

  constructor(count: number, value: string, checked: boolean) {
    this.count = count;
    this.value = value;
    this.checked = checked;
  }
}

export class MyList{
  public category: string;
  public listItem : ListItem [];

  constructor(category: string, listItem : ListItem []) {
    this.category = category;
    this.listItem = listItem ;
  }
}

我正在从 Azure 搜索中调用列表，该列表工作正常。问题是当我将值设置为复选框时。

<div *ngFor="let list of myList; let listIndex = index;">
  <div *ngFor="let item of list.listItems; let itemIndex = index;">
    <input type="checkbox" [name]="list.category + item.value"
         (change)="item.checked = !item.checked"
         [ngModel]="item.checked" />
  </div
</div>

但该值也始终为 false onClick。我尝试使用 [(ngModel)] 但也没有用。我也尝试做一个函数：

(change)="oncheck(listIndex, itemIndex)"

oncheck(listIndex: number, itemIndex: number) {
   this.myList[listIndex].listItems[itemIndex].checked =  
           !this.myList[listIndex].listItems[itemIndex].checked;
  }

但我收到此错误：

Cannot assign to read-only property 'checked' of object '[object Object]'

这是为什么以及如何解决？谢谢

Answer 1

您可以使用 material2 md-checkbox 指令来创建样式元素。在我看来，这并不是真正的双向绑定，它只是双向绑定的一种组合（模板 - 数据源和数据源 - 模板）

更新：我创建了一个小的 plnkr 来重现你的情况：http://plnkr.co/edit/cr7TokiqSaBGli7mgCBM

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let element of elements; let i = index;">
    <span>Val: {{element}}</span>
      <input type="checkbox"
       [checked]="element" (change)="handleChange(element, i)">
    </div>
  `,
})
export class App {
  elements= [
    false,
    true,
    false,
  ]:

  handleChange(val: boolean, index: number){
    console.log("Index: "+index);
    console.log("Val:  "+val);
    this.elements[index] = !val;
  }

列表中的元素已正确呈现，但更改事件在某些情况下会修改元素数组中不正确位置的值。待会再看

更新：重构 plnkr

请检查： http://plnkr.co/edit/Ich0g5kzSiQINZjh3VYo

我对你发给我的 plnkr 做了一些修改。

我将迭代变量从 const 更改为 let（考虑到它们的值在循环执行期间不是常量）。

正如我之前提到的，很可能有 2 种可能性：.ts 中的 classes 正在以错误的方式转译为 .js（class 成员被设置为只读默认值），或者您手动将值映射到 class 个实例的方式有问题。

复选框 ngFor Angular2 上的双向绑定

two-way binding on checkbox ngFor Angular2

checkbox

events

angular

two-way-binding