Was ist falsch an dieser Winkelform, die dazu führt, dass ausgewählte Werte in der Benutzeroberfläche unerwartet zurückgesetzt werden?

Question

Zu Demonstrationszwecken habe ich diesen simplen Angular App erstellt, die Benutzer eine Liste von Personen machen können: https://plnkr.co/edit/1RFGlXgHLwik02MvbhCz?p=preview

Vorlage:

<form #peopleForm="ngForm"> 
<div *ngFor="let person of people"> 
    Name: <input type="text" name="name" placeholder="Name" [(ngModel)]="person.name"> 
</div> 
</form> 

Komponente:

export class App { 
    people = [ 
    { 
     name: 'Bob', 
    }, 
    { 
     name: 'Alice', 
    } 
    ]; 

    constructor() { } 

    addPerson() { 
    this.people.push({name: ''}); 
    } 
} 

Es hat zwei Bugs :

• Listenelemente werden in der Benutzeroberfläche zurückgesetzt, wenn „Add Person“ Button geklickt Namen
• Die letzten Benutzers wird zweimal

gezeigt

ich die zugrunde liegende JSON haben auch auf die Seite gedruckt wird, und es sieht richtig, aber der Rest der UI ist falsch . Kann mir jemand sagen, was ich falsch mache?

Update: Aus irgendeinem Grund funktioniert es wie erwartet, wenn ich das äußere <form> Tag entferne. Wer weiß warum?

Answer 1

Aktualisieren: ngModel funktioniert nicht, weil Sie keinen eindeutigen Namen für Ihre Eingabe definiert haben. Versuchen Sie diese

<div *ngFor="let person of people; let i=index"> 
    Name: <input type="text" name="name{{i}}" placeholder="Name" [(ngModel)]="person.name" > 
    Gender: 
    <select name="gender{{i}}" [(ngModel)]="person.gender"> 
    <option value=""></option> 
    <option value="m">Male</option> 
    <option value="f">Female</option> 
    </select> 
</div> 

Updated plunker

Answer 2

<select name="gender" [(ngModel)]="person.gender"> 
<option *ngFor="let value of person" [value]="value.gender">{{value.gender}}</option> 

dies versuchen, wird diese machen Drop-down-dynamisch.