ввод теряет фокус при редактировании значения. Использование ngFor и ngModel. Angular5

Question

У меня есть простой список, который имеет двустороннюю привязку к параметру hero в hero.component.ts .

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

 <li *ngFor="let power of hero.powers; let i = index">
      <input [(ngModel)]="hero.powers[i]"/>
 </li>

Answer 1

Вы пытались использовать trackBy:trackByFn в вашем ngFor, используя его, чтобы предотвратить повторное воссоздание DOM, и он будет отслеживать изменения

см. Этот урок здесь

Answer 2

Использование функции угловых треков trackBy устраняет проблему.

живой пример, показывающий это