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

Question

我正在尝试为一系列Angular人员创建注册表。人员位于 Person 对象的数组中。 问题在于所有输入字段都绑定在一起！ 我使用 String [] 做到了这一点，它的工作原理很像，但是在使用Person时 行为不当！

这是我的组件：

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方法传递引用，因此它在人员数组的五个位置中基本上是同一对象，它与字符串数组一起使用，因为字符串是不可变的，并且数组中充满了“不同”的字符串。参见此question。

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