Question

我正在构建一个发票应用来学习Angular2。我遇到的问题是如何构建行项目组件，其中一行包含3个输入，这些输入应来自并绑定到行项目数组中的对象。

在角度1中，我可以通过向输入的容器添加youArray.splice(0, 0, 'first item in Array');指令来轻松实现此目的。这里的等价物是什么？

这是我的代码：

HTML：

ng-form

组件：

<form name="form" ng-submit="$ctrl.submit(form)" novalidate>

<!-- some more code -->

<ul class="list invoice-table__body">
  <li *ngFor="let item of model.lineItems; let i = index">
    <input
      type="text"
      name="description"
      class="col-sm-8"
      [(ngModel)]="item.description">

    <input
      type="number"
      name="quantity"
      class="col-sm-2"
      [(ngModel)]="item.quantity">

    <input
      type="number"
      name="total"
      class="col-sm-2"
      [(ngModel)]="item.total">
  </li>
</ul>

<!-- some more code -->

</form>

Answer 1

这里的问题在于输入名称，在你使用name =“description”的情况下，这里发生的事情总是会使用最后一个描述更新form.description.value。在你的情况下，你有一系列的描述，你需要有form.description [i] .value

的数组

因此，修正是将更改描述为唯一。

名称= “描述_ {{I}}”

对ngFor内的每个输入重复此操作。要解决此问题，您可以执行以下操作：

<ul class="list invoice-table__body">
  <li *ngFor="let item of invoice.lineItems; let i = index">

    <input
      type="text"
      name="description_{{i}}"
      class="col-sm-8"
      [(ngModel)]="invoice.lineItems[i].description">

    <input
      type="number"
      name="quantity_{{i}}"
      class="col-sm-2"
      [(ngModel)]="invoice.lineItems[i].quantity">

    <input
      type="number"
      name="total_{{i}}"
      class="col-sm-2"
      [(ngModel)]="invoice.lineItems[i].total">
  </li>
</ul>

你可以看到你的例子在这里工作： https://plnkr.co/edit/orldGCSYDUtlxzMFsVjL?p=preview

我的建议总是与ReactiveForms（模型驱动的表单）一起使用，也许我将使用FormsModule（模板驱动的表单）的唯一情况是小表单。它更容易，更适合做数据阵列。

希望它能解决你的问题。

Angular 2表单，包含对象输入数组

1 个答案: