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

Question

我有这个组件模板

<!-- 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>

当我在 currentStorageMovement.storage_product_movements 中有 2 个元素时，一个元素的数量为 2，另一个元素的数量为 3，角度显示 2 个输入，两者都具有 3 作为值。

使用 Augury 我可以确保数组元素具有正确的 2 和 3 作为值，具有 3 的输入元素（应该是 2）反而具有以下属性：

NgModel
  value:  3
  viewModel:  2

所以不知何故 ngModel 知道该值，但在输入值中显示其他内容

供参考，模态代码为this

更新：将同一个模板克隆到modal外后，可以看到modal外的输入是正确的，里面的输入是错误的，可能是modal使用jquery移动dom从我的模板到应用程序 dom 元素外部以具有正确的样式/定位？

Answer 1

每个输入元素都有相同的name属性，应该是唯一的。要给每个输入元素一个唯一的名称，您可以在其值中使用{{ }} 表达式，并将i 作为表达式的一部分。例如{{ "amount" + i }}。