Angular中[(ngModel)]绑定*ngFor变量报错及输入异常求助

架构老林

2026-7-29

Angular *ngFor 双向绑定输入框焦点丢失问题解决

问题原因分析

最初报错是因为element是*ngFor循环生成的只读模板变量，不能直接用于[(ngModel)]双向绑定，Angular不允许修改这类变量的值。
修改后输入框只能输入一个字符、丢失焦点，有两个核心原因：
- 所有输入框的name属性完全相同，Angular表单无法正确区分各个控件的状态，导致输入后触发不必要的重新渲染。
- 若list是字符串数组，字符串属于不可变类型，修改list[index]时会替换整个数组元素，触发*ngFor重新渲染当前列表项，输入框因此失去焦点。

解决方案

方案一：改用对象数组（推荐）

将字符串数组改为包含可修改属性的对象数组，这样修改属性值不会改变数组元素的引用，*ngFor不会重新渲染整个项，同时给每个输入框设置唯一name：

组件类中定义对象数组：

// 示例初始化，可根据实际需求调整
list: { value: string }[] = [{ value: '' }, { value: '' }, { value: '' }];

修改模板代码：

<div *ngFor="let element of list; let index=index">
  <mat-form-field>
    <input matInput type="text" [(ngModel)]="element.value" [name]="'element-' + index" #field="ngModel">
  </mat-form-field>
</div>

方案二：保留字符串数组，添加trackBy函数

如果不想修改数组结构，通过trackBy函数告诉Angular根据索引追踪列表项，避免不必要的重新渲染，同时设置唯一name：

组件类中添加trackBy函数：

trackByIndex(index: number): number {
  return index;
}

修改模板代码：

<div *ngFor="let element of list; let index=index; trackBy: trackByIndex">
  <mat-form-field>
    <input matInput type="text" [(ngModel)]="list[index]" [name]="'element-' + index" #field="ngModel">
  </mat-form-field>
</div>