從json對象綁定數組到Angular2中使用ngModel的表單

Question

我有一個表單來創建一個「問題」，它是一個包含答案字符串數組的對象。我的問題是，我無法找到綁定這些問題的答案模型

辦法一個天真的實行將是：

import { Component } from '@angular/core'; 
class Question { 
    question: string; 
    answers: Array<string>; 
} 

@Component({ 
    selector: 'app', 
    template: ` 
<input type="text" [(ngModel)]="question.question"> 
<input type="text" *ngFor="let answer of question.answers" [(ngModel)]="answer"> 
` 
}) 

export class AppComponent { 
    question: Question = new Question; 
    question.answers = new Array(4); 
    constructor(){}; 
} 

問題是在第二ngModel。 有了這個解決方案，我得到的錯誤：

zone.js:388 Unhandled Promise rejection: Cannot assign to a reference or variable! ; Zone: <root> ; Task: Promise.then ; Value: Error: Cannot assign to a reference or variable! 

我想我們不能生成值從ngFor結合的典範。

我也嘗試這些選項：

• [(ngModel)]="question.answers[index]" - >有了這個，我就ngFor添加let index=index;和相應名稱的輸入。在這裏，我有我在下一段描述的錯誤
• [(ngModel)]="question.answers[] - >嘗試做同樣的事情，你使用純HTML。這根本不起作用

沒有一個像我期望的那樣工作：當你改變輸入值時，它似乎重新加載了ngFor循環。當我擴展我的解決方案以允許用戶追加或刪除答案時，添加答案會刪除第一個答案的內容。

Answer 1

至於我可以看到你有兩種選擇：

1使用對象，而不是一個數組

喜歡這裏描述，您可以通過使用ngFor和管對象迭代：Iterate over TypeScript Dictionary in Angular 2

@Pipe({ name: 'values', pure: false }) 
export class ValuesPipe implements PipeTransform { 
    transform(value: any, args: any[] = null): any { 
    return Object.keys(value).map(key => value[key]); 
    } 
} 

<div *ngFor="#value of object | values"> </div> 

2使用的第二陣列爲ngFor循環像這裏http://plnkr.co/edit/PO9ujHLWfzvYD67nDCwT?p=preview

import { Component } from '@angular/core'; 

export class Hero { 
    id: number; 
    name: string; 
} 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1> 
    <div *ngFor="let count of dummyArr; let i=index"> 
    <input type="number" [(ngModel)]="data[i]"> 
    </div> 
    ` 
}) 
export class AppComponent implements OnInit { 
    name = 'Angular'; 
    data:number[]=[]; 
    dummyArr:number[]=[]; 

    ngOnInit(){ 
    this.data.length=6; 
    this.dummyArr.length=6; 
    } 
}