Angular添加数组元素时输入框值被重置的问题求助

问题原因 #

你的代码存在几个核心问题导致输入值重置：

1. 通过数组索引courses[i].label绑定ngModel，当数组新增元素时，Angular的变更检测可能重新识别索引对应的元素，导致绑定的输入值丢失；
2. name属性使用了动态的courses[i].label，这会让表单控件的标识随输入值变化而改变，干扰ngModel的绑定逻辑；
3. 未给*ngFor指定trackBy函数，Angular默认通过对象引用跟踪元素，新增元素时可能重新渲染所有已有DOM节点，重置输入值。

解决方案 #

1. 修改模板代码 #

将ngModel绑定到循环变量的属性上，设置唯一的name属性，并添加trackBy：

<div>
  <div class="row" *ngFor="let relacao of courses; let i = index; trackBy: trackByCourse">
    <div>
      <input 
          type="text" 
          name="course-label-{{i}}" 
          [(ngModel)]="relacao.label"
      />
    </div>
  </div>
</div>
        
<div>
  <button (click)="addCourse()">add</button>
</div>

2. 在TS文件中添加trackBy函数 #

addCourse() {
  this.courses.push({ label: 'test' });
}

// 用于Angular识别数组元素的跟踪函数
trackByCourse(index: number, course: any): number {
  // 如果你的course对象有唯一id（比如course.id），优先返回id，比index更可靠
  return index;
}

说明 #

• 直接绑定循环变量relacao.label：避免数组索引变化导致的绑定失效，循环变量本身就是当前数组元素，绑定更直接稳定；
• 唯一的name属性：确保每个输入控件都有独立的标识，防止ngModel因为标识变化丢失绑定值；
• trackBy函数：告诉Angular如何跟踪数组元素，新增元素时只会渲染新的DOM节点，不会重新渲染已有元素，从而保留之前输入的内容。

内容的提问来源于stack exchange，提问作者Renato Souza de Oliveira