Значение Angular 6 ngFor обновляется при изменении входного значения

Question

Я не знаком с Angular 2, 3, 4 и 5 и пытаюсь лучше понять Angular 6.

Проблема : Я помещаю пользовательский объект в массив пользователей, затем, когда я меняю значение входных данных, весь объект внутри массива также изменяется.

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