如何實現迭代的數組填充Angular 2輸入？

我希望能夠按順序添加/刪除項目，並將它們聚合成一個數組發送到後端。這些數據將是這樣的：如何實現迭代的數組填充Angular 2輸入？

客戶名稱：比利
訂單：比薩，漢堡，壽司]

無法找到進入迭代輸入綁定任何SO答案或文檔。任何人試圖這樣做？模板代碼：

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

內添加新按鈕的點擊功能：

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

不幸的是，這是行不通的。提前致謝！ :)

編輯1：有2個按鈕，（分別）觸發：

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

來源

2016-11-01 Dan Feinstein

我可以看到一個問題。您應該使用您在模板中聲明的變量i。

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

編輯

角度看來輸入到輸入時，在做變化檢測，並再次呈現它們，這種情況發生時，你失去了焦點。

但是，如果你將值包裝到對象中，並突然它的作品。

組件：

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

模板：

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

來源

2016-11-01 07:52:56 Kyrsberg

D'哦！這工作...並創造了一個新問題。數據按預期進行管道輸入，但是，現在每次將字符輸入到添加的字段中時，都會取消選擇該字段，需要再次點擊字段。有任何想法嗎？ –

我猜角度做了一些變化檢測，並在這個過程中再次用新值呈現輸入。 – Kyrsberg

答案在於ngforms，有一個專門用來處理這個東西的庫： https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 –

如何實現迭代的數組填充Angular 2輸入？

回答

相關問題