ngFor JSONオブジェクト - 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)); 
    } 

iが直面

Thの問題であり、iは、第2の入力を挿入すると、さらに第一入力は両方とも同じngModelを参照するので、2番目に入力が変化します。たとえば、「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); 

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

_.cloneがするのではなく、新しいオブジェクトを渡しますlodash機能です

TO参照。

クイックフィックスを試すこともできます（パフォーマンス上の理由により、お勧めできません）。

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