角度编辑表格上的所有值

Question

我有一个要在表格上显示的数组，但我需要编辑该表格一列中的所有值。我的代码是这样的：

<tr *ngFor="let line of invoice.lines; let index = index">
    <td>
        {{line.quantity}}
    </td>
    <td style="width: 35%">
        {{line.productName}}
    </td>
    <td>
        <input type="number" class="form-control" name="order_price"
        id="field_order_price" [(ngModel)]="line.price"/>
    </td>
...
</tr>

问题是input 在所有行中都具有相同的值（这是数组中的最后一个）。我尝试在input 旁边打印line.price 的值，以确保我得到了正确的值，这就是我得到的：

我错过了什么？

更新 1：由建议更改没有工作:(

<input type="number" class="form-control" name="order_price" (click)="onOrderPriceChange(index)" id="field_order_price1_{{index}}" [(ngModel)]="invoice.lines[index].price"/>

角度：

trackByIndex(index: number, line: IInvoiceLine): any {
    return line.id;
  }

Answer 1

您需要为每个输入提供一个唯一的 ID。您也可以使用下面的代码来解决您的问题。

<tr *ngFor="let line of invoice.lines; let index = index">
  <td>
      {{line.quantity}}
  </td>
  <td style="width: 35%">
      {{line.productName}}
  </td>
  <td>
      <input type="number" class="form-control" [id]="'field_order_price' + index" [(ngModel)]="line[index]" />
  </td>
</tr>

希望这会有所帮助！ 谢谢。

Answer 2

每个输入都应该有一个唯一的 ID 属性。如果您有任何疑问，请告诉我。

<tr *ngFor="let line of invoice.lines; let index = index">
  <td>
    {{line.quantity}}
  </td>
  <td style="width: 35%">
    {{line.productName}}
  </td>
  <td>
    <input type="number" class="form-control" name="{{'order_price_' + index}}" id="{{'field_order_price_' + index}}" [(ngModel)]="invoice.lines[index].price" />
  </td>
</tr>

希望这会有所帮助:)