Angular 角度2未在输入中正确显示值

我有这个组件模板

<!-- Some initial page code -->
<sm-modal title="Create new movement" icon="exchange" #editStorageModal>
  <modal-content>
    <form class="ui form error" (ngSubmit)="saveEdit()" #editStorageModalForm="ngForm">
      <!-- Other stuff -->
      <table class="ui celled table">
        <thead>
          <tr>
            <th>Product</th>
            <th>Amount changed (negative for removals)</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let movement of currentStorageMovement.storage_product_movements; let i = index; trackBy:customTrackBy">
            <td>
              <sm-select [(model)]="movement.product_id" placeholder="Select product..." class="fluid search" [ngClass]="{loading: loadingProducts}">
                <option *ngFor="let product of products" value="{{product.id}}">{{product.name}} - {{product.supplier?.name}}</option>
              </sm-select>
            </td>
            <td>
              <div class="field" [ngClass]="{error: formErrors.storage_product_movements && formErrors.storage_product_movements[i]?.amount}">
                <input type="number" step="1" placeholder="Amount" [(ngModel)]="movement.amount" name="amount">
              </div>
            </td>
            <td>
              <a class="clickable" (click)="deleteProductMovement(i)"><i class="trash icon"></i></a>
            </td>
          </tr>
          <tr *ngIf="(!storageMovements || !storageMovements.length) && !loading"><td colspan="3" class="center aligned">No storage movements yet...</td></tr>
          <tr *ngIf="loading"><td colspan="3"><div class="ui active centered inline loader"></div></td></tr>
        </tbody>
      </table>
      <div class="ui button primary" (click)="addNewProductMovement()">New product movement</div>
    </form>
  </modal-content>
  <modal-actions>
    <div class="ui button red" (click)="closeEdit()">Abort</div>
    <div class="ui button green" (click)="editStorageModalForm.ngSubmit.emit()" [ngClass]="{loading: submitting}">Save</div>
  </modal-actions>
</sm-modal>

因此，ngModel知道该值，但在输入值中显示了其他内容

作为参考，模态代码为

---

更新：在模式外克隆相同的模板后，我可以看到模式外的输入是正确的，模式内的输入是错误的，可能是因为模式使用jquery将dom从我的模板移动到app dom元素外部，以获得正确的样式/定位？

每个输入元素都具有相同的name属性，这应该是唯一的。要给每个输入元素一个唯一的名称，可以在其值中使用

{{}

表达式，并将

i

作为表达式的一部分。例如，

{{“amount”+i}}

每个输入元素都有相同的name属性，这应该是唯一的。要给每个输入元素一个唯一的名称，可以在其值中使用

{{}

表达式，并将

i

作为表达式的一部分。例如，

{{“amount”+i}

每个

输入

元素都具有相同的

名称

属性，通常认为该属性是唯一的。也许这会把事情搞砸？你就是那个人，如果你想在一个答案中解释这一点，该答案显示了一种基于索引分配唯一名称的方法，我会将每个

input

元素都具有相同的

name

属性，这通常被认为是唯一的。也许这会把事情搞砸？你就是那个人，如果你想在一个答案中解释这一点，说明如何根据索引指定一个唯一的名称，我将标记为一个公认的答案谢谢这个非常有用的答案！：）示例：您可以将“let i=index”放在ngFor循环中。然后在你的html代码中访问{{i}}。谢谢你这个非常有用的答案！：）示例：您可以将“let i=index”放在ngFor循环中。然后访问html代码中的{i}。

NgModel
  value:  3
  viewModel:  2