ngFor mit JSON-Objekt - Angular 2 ngmodel Perspektive

Question

Ich habe versucht, eine einfache Aufgabe zu tun, eine Eingabe in Textbox und die Auflistung derselben. Der Beispielcode ist unten: beispiel.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> 

Und Code in example.ts unter:

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

Th Problem, das ich konfrontiert ist, wenn ich den zweiten Eingang einfügen, auch die erste Eingabe ändert sich als zweite, da beide auf dasselbe ngModel verweisen. Wenn ich zum Beispiel "GG" als Eingabe hinzufüge, ist der erste Eintrag GG. Wenn ich "HH" eintrage, dann nehme zuerst GG auf HH auf und das Ergebnis ist HH und HH. Bitte helfen Sie mir zu verstehen, wo ich falsch gelaufen bin und helfen Sie, dies zu lösen.

Answer 1

Da Ihr Objekt gleichen Schlüsselnamen jedes Mal, während Drücken des Objekts wird mit neuen Wert aktualisiert, so wie haben gehen sie wie folgt

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

Lesen Sie mehr über Object.assign() von hier https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Answer 2

Sie haben richtig verstanden, dass das Problem durch die Objekte mit der gleichen Referenz verursacht wird. Wie Sie in einem einfachen Objekt zum Speichern von Benutzer Details versuchen, können Sie einfach das Objekt klonen

indem

this.record.push(username); 

TO

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

Die _.clone ist eine lodash Funktion, die ein neues Objekt anstelle eines passieren Referenz.

Sie können auch eine schnelle Lösung versuchen (aus Leistungsgründen dringend davon abgeraten);

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