Двухстороннее связывание данных в ngModel неправильно связывается внутри цикла * ngFor - PullRequest
Новая
       60

Двухстороннее связывание данных в ngModel неправильно связывается внутри цикла * ngFor

0 голосов
/ 28 октября 2019

У меня есть следующий html внутри ngForm: 

<div class="form-group form-group-flex" *ngFor="let customerRole of customerRoles; let i = index">
    <div class="role-name">
      <label for="roleName">Rolename{{i + 1}}</label>
      <input type="text" class="form-control" name='role-name' id="roleName" [(ngModel)]="customerRole.name"/>
    </div>
    <div class="hourly-wage"> // can ignore this div, works similary as role-name above
      <label for="hourlyWage">Hourly wage</label>
      <div class="input-group">
        <input type="number" class="form-control" name='hourlyWage' id="hourlyWage"
               [(ngModel)]="customerRole.hourlyWage"/>
        <div class="input-group-append">
          <span class="input-group-text ignore-radius">€</span>
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-dark btn-sm" id="deleteRole" (click)="deleteRole(customerRole)" ngbTooltip="Delete role">
      <i class="fa fa-trash" aria-hidden="true"></i>
    </button>
  </div>
  <div class="row">
    <a class="add-role-icon">
      <i class="fa fa-plus" (click)="addRole()" placement="top" ngbTooltip="Add role"></i>
    </a>
    <label *ngIf="customerRoles.length === 0; else addMoreRoles">Add role</label>
    <ng-template #addMoreRoles>
      <label>Add another role</label>
    </ng-template>
  </div>
</div>

Метод addRole() выглядит следующим образом: 

    addRole() {
    this.customerRoles.push(createInitialRole());
  }

customerRoles - это просто массив, содержащий роли.

И вот как это выглядит:

enter image description here

Таким образом, всегда есть новая роль, содержащая роленое имя и hourlyWage, добавляемая при каждом нажатиикнопка «добавить другую роль». У меня проблемы с привязкой ngModel, каждый раз, когда я добавляю другую роль, каждое входное значение по какой-то причине изменяется на значение последнего элемента, добавленного в массив customerRoles.

Так что, если я добавлю еще одну роль к изображению выше, это будет выглядеть так:

enter image description here

Каждое входное значение в представлении изменяется на значение последней добавленной роли, которая в этом случае содержитпустое имя и пустая почасовая оплата. Роли 1 и 2 связываются со значением Роли 3 после ее добавления по некоторым причинам. Массив customerRoles содержит правильные элементы. Например, он все еще содержит роль младшего разработчика программного обеспечения в 0-м индексе. Почему он внезапно отображает последнее добавленное значение в массиве вместо значения, к которому он привязан? Если я использую 

value="{{customerRole.name}}"
(input)="customerRole.name= $event.target.value"

вместо 

[(ngModel)]="customerRole.name"

, все работает как положено, но это обходной путь, который я не хочу делать.

Редактировать:

Только для целей тестирования, если я отображаю customerRole.name в метке над полем ввода, как это 

<label for="roleName">{{customerRole.name}}</label>
<input type="text" class="form-control" name='role-name' id="roleName" [(ngModel)]="customerRole.name"/>

метка продолжает показывать правильное значение, в то время как поле ввода переключается на значение последнегоэлемент добавлен, как упоминалось ранее.

1 Ответ

1 голос
/ 28 октября 2019

Ваш HTML, сгенерированный ngFor, будет неправильным, так как все входы roleName имеют одинаковые name и id. Я думаю, что это может привести к неправильному поведению ngFor.

из-за этой части ... name='role-name' id="roleName" ... (и то же самое для других)

Удалите имена и идентификаторы (или сделайте их уникальнымиза итерацию) и все должно работать снова

...