Блог

У меня есть этот шаблон компонента

 <!-- 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 amp;amp; 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) amp;amp; !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>
  

когда у меня есть 2 элемента в currentStorageMovement.storage_product_movements одном с amount 2 , а в другом с amount 3 , angular отображает 2 входных данных, оба из которых имеют 3 значение.

Используя Augury, я могу видеть, что элементы массива правильно имеют значения 2 и 3, вместо этого входной элемент с 3 (тот, который должен быть 2) обладает этими свойствами:

 NgModel
  value:  3
  viewModel:  2
  

итак, каким-то образом ngModel знает значение, но отображает что-то еще во входном значении

Для справки, модальный код этот

Обновление: после клонирования того же шаблона вне модального я вижу, что ввод вне модального правильный, а тот, что внутри, неправильный, может быть потому, что модальный использует jquery для перемещения dom из моего шаблона за пределы элемента app dom, чтобы иметь правильный стиль / позиционирование?

Каждый из входных элементов имеет один и тот же атрибут name, который должен быть уникальным. Чтобы присвоить каждому элементу ввода уникальное имя, вы можете использовать {{ }} выражение в его значении с i как часть выражения. Например {{ "amount" i }} .