编辑值时输入失去焦点。使用 ngFor 和 ngModel。角5答案

【问题标题】：input loses focus when editing value. Using ngFor and ngModel. Angular5编辑值时输入失去焦点。使用 ngFor 和 ngModel。角5
【发布时间】：2018-10-12 20:24:59
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html angular angular5

【解决方案1】：

使用 Angular 的 trackBy 功能解决了这个问题。

live example showing it

【讨论】：

是的，我知道它会在更新时发生:)。虽然我不知道我应该如何使用两种方式绑定列出我的属性，并且仍然能够在不刷新输入字段的情况下编辑它们。
假设 hero.powers 是一个数组，power 和 hero.powers[index] 应该没有区别。它们将引用同一个对象。
@Sebbe 然后尝试 angular 的 trackBy 函数。
@Sebbe 更新了答案。
@FranklinPious 太棒了！奇迹般有效！非常感谢！

【解决方案2】：

您是否尝试在您的 ngFor 中使用 trackBy:trackByFn，通过使用它来防止 Angular 重新创建您的 DOM，它会跟踪更改

查看本教程here

【讨论】：

【解决方案3】：

在html中：

<div *ngFor="let a of a[]; let index = index; trackBy: trackByFn">

在 TS 中：

trackByFn(index, item) {   return index; }

【讨论】：