帶有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)));