Question

我希望能够在订单中添加/删除项目，并将它们聚合到一个数组中以发送到后端。数据看起来像：

客户名称：Billy
订单：[披萨，汉堡，寿司]

无法找到任何进入迭代输入绑定的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：有两个按钮分别触发：

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输入？

1 个答案: