Angular 6 ngFor值在更改输入值时更新

Question

我不熟悉Angular 2,3,4和5，我正在努力更好地理解Angular 6。

问题：我正在将用户对象推送到users数组，然后当我更改输入值时，数组中的所有对象也在变化。

component.ts

public data; //user input id,age,first_name,last_name
public users: User[] = [];

constructor() {
    this.data = {};
}

ngOnInit() {
}

btnClick = function () {
    //push the user input to array
    this.users.push(this.data);
};

请在这里查看我的示例代码：https://stackblitz.com/edit/angular-1ztg1k

Answer 1

在数组中推送data对象后，您将被绑定到相同的data引用。在数组中添加项目后，文本输入仍然是指通过阵列中的data引用的早期[(ngModel)]="data.first_name"引用。

您所要做的就是将data实例重新初始化为空对象文字。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  users = new Array();
  data = {}

  btnClick = function (){
    this.users.push(this.data);
    this.data = {};
  }
}

我分叉你的代码并修改它：https://stackblitz.com/edit/angular-klrrjd