如何实现迭代的数组填充 Angular 2 输入？

Question

我希望能够 add/remove 订单中的项目并将它们聚合成一个数组以发送到后端。数据将如下所示：

客户姓名：比利
订单：[披萨、汉堡、寿司]

找不到任何涉及迭代输入绑定的 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()
}

Answer 1

我能看出一个问题。您应该使用您在模板中声明的变量 i。

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

编辑

angular 似乎在输入输入并再次渲染它们时进行变化检测，当发生这种情况时你会失去焦点。

但是如果你将值包装到对象中，突然它就起作用了。

组件：

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>

如何实现迭代的数组填充 Angular 2 输入？

How to implement iterated, array-filling Angular 2 inputs?

javascript

angularjs

ngmodel

angular