绑定到 ngFor 中的对象数组，将所有输入绑定在一起

Question

我正在尝试为 Angular 的一组人创建注册表单。人员位于 Person 对象的数组中。问题是所有输入字段都绑定在一起！我用 String[] 做了这个，它就像一个魅力但是当使用 Person 时 class 它行为不端！

这是我的组件：

Stackblitz.com: https://stackblitz.com/edit/angular-m5xzds

TS 文件:

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

class Person {
  constructor(
    firstname: string,
    lastname: string) { }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  array = Array;
  count = 3;
  persons: Person[];
  ngOnInit() {
    this.persons = new Array<Person>(5).fill({});
  }
}

模板：

count: <input type="number" name="count" [(ngModel)]="count">
<div>Persons:</div>

<div *ngFor="let item of array(count).fill(0); index as i">
  <form>
<input [(ngModel)]="persons[i].firstname" type="text" class="form-control" name="name_{{i}}">

  </form>
</div>
{{persons|json}}

Answer 1

*ngFor 可以直接遍历你的人员列表，我觉得你可以通过执行以下操作来简化它。

  <form>
<div *ngFor="let person of persons; let i = index">
<input *ngIf="i < count" [(ngModel)]="person.firstname" type="text" class="form-control" name="{{person.firstname}}">  
</div>
</form>

Answer 2

Array.fill 方法传递了引用，所以它在你的 persons 数组的五个地方基本上是同一个对象，它正在使用字符串数组，因为字符串是不可变的并且数组充满了 'different' 字符串。看到这个。

因此您可以使用映射函数来解决问题，或者将 ngmodel 和 ngmodelchange 分开，请参见此处的示例：stackblitz example

绑定到 ngFor 中的对象数组，将所有输入绑定在一起

Binding to an array of objects inside an ngFor, binds all inputs together

javascript

angular-ngmodel

angular2-forms

angular2-template

angular