復選框ngFor Angular2上的雙向綁定

Question

我正在創建一個Angular2項目，並且復選框的雙向綁定存在問題。

我有一個像listItem和List這樣的類：

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>

但onClick的值始終為false。 我嘗試使用[（ngModel）]，但也無法正常工作。 我也嘗試做一個功能：

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

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

但我收到此錯誤：

無法分配給對象“ [object Object]”的只讀屬性“ checked”

為什么會這樣以及如何解決呢？ 謝謝

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

列表中的元素正確呈現，但是更改事件在某些情況下會修改elements數組中不正確位置的值。 以后再看一眼

更新：重構的plnkr

請檢查： http : //plnkr.co/edit/Ich0g5kzSiQINZjh3VYo

我對您發送給我的plnkr進行了一些更改。

我將迭代變量從const更改為let（考慮到在循環執行期間它們的值不為常數）。

正如我之前提到的，很可能存在兩種可能性：.ts中的類以錯誤的方式被轉換為.js（默認情況下，類成員被設置為只讀），或者您的方式有問題手動將值映射到類實例。