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

更新：在模态外克隆相同的模板后，我可以看到模态外的输入是正确的，里面的一个是错误的，可能是因为模态使用jquery来移动dom从我的模板到app dom元素之外，有正确的样式/定位？

Answer 1

每个输入元素都具有相同的name属性，该属性应该是唯一的。要为每个输入元素指定唯一名称，可以在其值{{ }}中使用i表达式，并将{{ "amount" + i }}作为表达式的一部分。例如var input = prompt('Please enter your temp in fahrenheit'); function converter (){ var x = Math.round((input - 32) * 5/9); console.log(x); return x; } alert('The temp in celsius is: ' + converter());。

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

1 个答案: