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 angular 显示 2 个输入，两者都具有 3作为价值。

使用 Augury 我可以看到数组元素正确地具有 2 和 3 作为值，具有 3 的输入元素（应该是 2 的那个）反而具有这些属性：

NgModel
  value:  3
  viewModel:  2

所以 ngModel 以某种方式知道该值，但在输入值中显示其他内容

供参考，模态码为this

Update: 在模态外克隆相同的模板后，我可以看到模态外的输入是正确的，里面的是错误的，可能是因为模态使用jquery 将 dom 从我的模板移动到应用程序外部 dom 元素以获得正确的 styling/positioning?

Answer 1

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

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

Angular 2 not showing correctly values in input

angular2-template

angular