Quel est le problème avec cette forme angulaire qui le fait réinitialiser les valeurs sélectionnées dans l'interface utilisateur de façon inattendue?

Question

Pour des fins de démonstration, j'ai créé cette simpliste application angulaire qui permet aux utilisateurs de faire une liste de personnes: https://plnkr.co/edit/1RFGlXgHLwik02MvbhCz?p=preview

Modèle:

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

Composant:

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

    constructor() { } 

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

Il a deux bugs :

• Les éléments de liste sont réinitialisés dans l'interface utilisateur lorsque « Ajouter personne » bouton est cliqué
• Le dernier nom de l'utilisateur se double

J'ai l'JSON sous-jacente en cours d'impression à la page ainsi, et il semble correct, mais le reste de l'interface utilisateur est erroné . Quelqu'un peut-il me dire ce que je fais mal?

Mise à jour: Pour une raison quelconque, cela fonctionne comme prévu lorsque je supprime la balise externe <form>. Quelqu'un sait pourquoi?

Answer 1

Mise à jour: ngModel ne fonctionnait pas car vous n'avez pas défini de nom unique pour votre entrée. Essayez cette

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

Essayez ceci, cela fera dynamique déroulante.