带有JSON对象的ngFor-Angular 2 ngmodel透视图

Question

我一直在尝试做一个简单的任务，在文本框中输入并列出相同的内容。 示例代码如下：Example.html：

<label>Name:</label>
<input type="text" [(ngModel)]="user.name" placeholder="Enter a name here">

<!-- conditionally display `yourName` -->
<button (click)="getData(user)">Add</button>
<hr>
<ul>
    <li *ngFor="let rec of record">{{rec.name}}</li>
</ul>

并且example.ts中的代码如下：

 record:any[]=[];
  user={"name":""};
  getData(username:any){
    this.record.push(username);
    console.log(JSON.stringify(this.record));
  }

我面临的问题是，当我插入第二个输入时，即使第一个输入也更改为第二个，因为两者都引用同一个ngModel。例如，如果我添加“ GG”作为输入，则第一个记录将是GG。 当我输入“ HH”时，首先记录GG更改为HH，结果将为HH和HH。 请帮助我了解我的错误之处，并帮助解决此问题。

Answer 1

由于每次按下时您的对象都有相同的键名，因此该对象将被更新为新值，因此该怎么做

 this.record.push(Object.assign({}, username));

从这里https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign了解有关Object.assign（）的信息

Answer 2

您已经正确理解问题是由具有相同引用的对象引起的。 当您尝试将用户详细信息存储在一个简单的对象中时，可以通过更改以下内容轻松克隆该对象

this.record.push(username);

至

this.record.push(_.clone(username));

_.clone是lodash函数，它将传递一个新对象而不是引用。

您也可以尝试快速修复（由于性能原因，不建议使用）；

this.record.push(JSON.parse(JSON.stringify(username)));