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

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

本文关键字：填充 数组 Angular 输入 迭代 何实现 实现      更新时间：2023-09-26

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

  • CustomerName:比利
  • 订单:[披萨，汉堡，寿司]

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

我看到一个问题。你应该使用你在模板中声明的变量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>

相关文章：