在ngFor中绑定ngModel到输入框时焦点丢失问题求助

这个问题我之前开发Angular项目时也踩过坑！核心原因是Angular默认的*ngFor追踪机制：当你通过ngModel修改数组元素时，Angular会认为整个数组发生了变化，进而重新渲染整个列表的DOM元素——这就导致你正在输入的输入框被销毁再重建，自然就失去焦点了。

解决方案：添加trackBy函数 #

我们可以给*ngFor指定一个trackBy函数，让Angular能识别每个列表项的唯一标识，只更新变化的元素，而不是整个列表。

步骤1：在组件类中定义trackBy函数

因为你的ingredients是字符串数组，没有唯一ID，我们可以用索引作为追踪标识：

// 组件.ts文件中
trackByIndex(index: number, item: string): number {
  return index;
}

步骤2：在模板中修改*ngFor指令

把trackBy绑定到刚才定义的函数，同时修正ngModel的绑定方式（直接绑定数组的索引位置，确保修改能同步回原数组）：

<div *ngFor="let ingredient of recipe.ingredients; let i = index; trackBy: trackByIndex;" class="input-group each-step">
  <span class="input-group-prepend" id="basic-addon1">
    <span class="input-group-text">{{i+1}}</span>
  </span>
  <input type="text" class="form-control" [(ngModel)]="recipe.ingredients[i]" placeholder="输入食材">
</div>

为什么这样有效？ #

trackBy函数告诉Angular：“用每个列表项的索引来识别它，只有当索引对应的元素真的变化时，才更新这个元素的DOM”。这样当你在输入框中输入内容时，Angular只会更新当前输入框的内容，不会重建整个列表，输入框也就不会失去焦点了。

如果未来你的ingredients改成了对象数组（比如每个食材有id属性），可以把trackBy函数改成返回item.id，这样追踪会更准确哦！

内容的提问来源于stack exchange，提问作者Sarthak Sharma