使用 Angular2 中的 ngModel 将数组从 json 对象绑定到表单

Question

我有一个表单可以创建一个 "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 做同样的事情。这根本行不通

None 其中的一些按我的预期工作：当您更改输入的值时，它似乎会重新加载 ngFor 循环。当我扩展我的解决方案以允许用户附加或删除答案时，添加答案会删除第一个答案的内容。

Answer 1

据我所知，您有两个选择：

1 使用对象而不是数组

您可以使用 ngFor 和管道遍历对象，如下所述：

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

使用 Angular2 中的 ngModel 将数组从 json 对象绑定到表单

Bind array from a json object to a form using ngModel in Angular2

typescript

angular-ngmodel

angular2-forms

angular