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

Question

我希望能够按顺序添加/删除项目并将它们聚合到一个数组中以发送到后端。数据将如下所示：

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

找不到任何进入迭代输入绑定的 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>

在 Add New 按钮的 click 函数中：

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