Wie werden iterierte, Array-füllende Angular 2-Eingänge implementiert?

Question

Ich möchte Elemente in einer Reihenfolge hinzufügen/entfernen und sie in einem Array aggregieren lassen, um sie an das Backend zu senden. Die Daten werden wie folgt aussehen:

• Kundenname: Billy
• Bestellungen: [Pizza, Burger, Sushi]

wurden keine SO Antworten oder Dokumentation, die in iterierte Eingabe wird verbindlich. Hat jemand das versucht? Template-Code:

<div> 
    <input 
    type="text" 
    name="name" 
    title="name" 
    placeholder="Customer Name" 
    [(ngModel)]="customerName"/> 
</div> 
<div *ngFor="let item of itemsInNewOrder; let i = index"> 
    <input 
    type="text" 
    name="order" 
    title="order" 
    [(ngModel)]="itemsInNewOrder[index]"/> 
</div> 

innerhalb der Klick-Funktion der New-Taste:

...firebaseStuff... .push({name: name, order: this.itemsInNewOrder})

leider funktioniert das nicht. Danke im Voraus! :)

Edit 1: Es gibt 2 Tasten, die (jeweils) auslösen:

incrementItemsInNewOrder() { 
    this.itemsInNewOrder.push("") 
} 
decrementItemsInNewOrder() { 
    this.itemsInNewOrder.pop() 
} 

Answer 1

ich ein Problem sehen. Sie sollten die Variable i verwenden, die Sie in der Vorlage deklariert haben.

<div *ngFor="let item of itemsInNewOrder; let i = index"> 
    <input 
    type="text" 
    name="order" 
    title="order" 
    [(ngModel)]="itemsInNewOrder[i]"/> <------ HERE 
</div> 

EDIT

Winkel scheint Änderungserkennung zu tun, wenn sie in die Eingänge der Eingabe und macht sie wieder, wenn, dass Sie den Fokus geschieht verlieren.

aber wenn Sie die Werte in Objekte einpacken und plötzlich funktioniert es.

Komponente:

itemsInNewOrder = [{value: 'Soda'}, {value: 'Burger'}, {value: 'Fries'}]; 

Vorlage:

<div *ngFor="let item of itemsInNewOrder; let i = index"> 
    <input 
     type="text" 
     name="order" 
     title="order" 
     [(ngModel)]="itemsInNewOrder[i].value"/> 
    </div>