wie dynamische Benutzereingabe generiert werden, ohne Felder zu löschen (siehe GIF)

Question

Ich habe ein Problem beim Erstellen dynamischer Benutzereingabefelder. Immer wenn ich ein neues Feld erzeuge, verschwindet der gesamte Inhalt innerhalb des Feldes. Ich werde einen Screenshot zur Verfügung stellen, um das Problem zu veranschaulichen.

http://imgur.com/a/Xzgm6

Relevante Code:

HTML:

<ion-item *ngFor="let field of fields"> 
    <ion-label fixed>Destination </ion-label> 
    <ion-input type="text" [(ngModel)]="field.name" name="name"></ion-input> 
    </ion-item> 
    <button ion-button color="light" icon-right (click)="addDestination()" > 
     Add Destination 
     <ion-icon name="add" ></ion-icon> 
    </button> 

Typoskript:

export class HomePage { 
    fields: any; 
    public destination1; 
    public destination2; 
    public destinations = []; 

    constructor(public navCtrl: NavController) { 
    this.fields = []; 
    } 

    addDestination(){ 
    this.fields.push({name: ''}); 
    } 
} 

Irgendwelche Ideen/Lösungen?

Dank

Answer 1

Ich traf die exact same problem vor 3 Tagen, kann man nicht anders input s mit dem gleichen name Attribut in einem form haben kann es den Wert der letzten Eingabe halten verbindlich. Dies sollte Ihr Problem lösen:

<ion-item *ngFor="let field of fields;let id = index"> 
    <ion-label fixed>Destination </ion-label> 
    <ion-input type="text" [(ngModel)]="field.name" name="name-{{id}}"></ion-input> 
    </ion-item> 
    <button ion-button color="light" icon-right (click)="addDestination()" > 
     Add Destination 
     <ion-icon name="add" ></ion-icon> 
    </button>