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

我有一个表单来创建一个“问题”，它是一个包含一个字符串数组的对象。我的问题是，我无法找到一种方法将这些答案绑定到问题模型

一个简单的实现是：

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(){};
}

我想我们无法将ngFor生成的值绑定到模型

我还尝试了以下选项：

• [（ngModel）]=“问题.答案[索引]”

  ->我添加了

  let index=indexon
  ngFor
  和输入对应的名称。这里有我在下一段中描述的错误

• [（ngModel）]=“问题。答案[]

  ->尝试使用纯HTML执行相同的操作。这根本不起作用

---

所有这些都没有达到我的预期效果：当您更改输入值时，它似乎会重新加载ngFor循环。当我扩展解决方案以允许用户追加或删除答案时，添加答案将删除第一个答案的内容。

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

1使用对象而不是数组

您可以使用ngFor和如下所述的管道在对象上迭代：

@Pipe（{name:'values'，pure:false}）
导出类ValuesPipe实现PipeTransform{
转换（值：any，参数：any[]=null）：any{
返回Object.keys（value）.map（key=>value[key]）；
}
}

2为ngFor循环使用第二个数组

从'@angular/core'导入{Component}；
出口级英雄{
id：编号；
名称：字符串；
}
@组成部分({
选择器：“我的应用程序”，
模板：`Hello{{name}}
`
})
导出类AppComponent实现OnInit{
名称='角度'；
数据：编号[]=[]；
dummyArr:number[]=[]；
恩戈尼尼特（）{
此.data.length=6；
此.dummyArr.length=6；
}
}

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

1使用对象而不是数组

您可以使用ngFor和如下所述的管道在对象上迭代：

@Pipe（{name:'values'，pure:false}）
导出类ValuesPipe实现PipeTransform{
转换（值：any，参数：any[]=null）：any{
返回Object.keys（value）.map（key=>value[key]）；
}
}

2为ngFor循环使用第二个数组

从'@angular/core'导入{Component}；
出口级英雄{
id：编号；
名称：字符串；
}
@组成部分({
选择器：“我的应用程序”，
模板：`Hello{{name}}
`
})
导出类AppComponent实现OnInit{
名称='角度'；
数据：编号[]=[]；
dummyArr:number[]=[]；
恩戈尼尼特（）{
此.data.length=6；
此.dummyArr.length=6；
}
}

明白了……这家伙用了第二个数组，但我觉得有点奇怪……你真的需要一个数组，或者你也可以迭代一个对象吗？你可以编写一个管道来实现这一点：这两个解决方案都是很好的调整，可以解决我的问题（但不是很好）。请相应地编辑您的答案，以便我可以验证它。我确实需要一个数组，因为我正在添加、删除元素，并且我需要一个从0到长度-1的索引。我可以用一个对象来完成它，但它似乎太难了…这家伙用第二个数组来完成，但我发现它有点奇怪…您真的需要数组吗？或者您也可以使用itera吗你可以编写一个管道来实现这一点：这两种解决方案都是非常好的调整，可以解决我的问题（尽管不是很好）。请相应地编辑您的答案，以便我可以验证它。我确实需要一个数组，因为我正在添加、删除元素，并且我需要一个从0到长度-1的索引。我可以使用对象进行此操作，但这似乎有些过分

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!

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

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