ngFor with JSON object - Angular 2 ngmodel perspective

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

閱讀有關Object.assign（）從這裏https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Answer 2

您已經正確理解問題是由具有相同參考的對象引起的。當你試圖存儲用戶的細節在簡單的對象，你可以輕鬆地通過改變克隆對象

this.record.push(username); 

TO

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

的_.clone是lodash功能，這將傳遞一個新的對象，而不是參考。

您也可以嘗試快速修復（由於性能原因，極不鼓勵）;

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