javascript - 编辑值时输入失去焦点。使用 ngFor 和 ngModel。 Angular 5

Question

我有一个简单的列表，它双向绑定(bind)到 hero.component.ts 中的参数 hero。

虽然当我开始在输入字段中输入时它失去了焦点，但我必须再次点击它。我应该怎么做才能允许用户编辑输入值而不会使输入字段丢失目标？

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

Answer 1

使用 angular 的 trackBy 函数修复了这个问题。

live example showing it

<hello name="{{ name }}"></hello>
<div>
   <li *ngFor="let power of hero.powers; let i = index; trackBy: trackByFn">
  <input [(ngModel)]="hero.powers[i]"/>
   </li>
</div>

组件文件

trackByFn(index, item) {
  return index;  
}