Angular表格含重复数据时，如何通过(change)事件更新指定行值？

1. 确保仅更新目标行：用trackBy函数 #

你遇到的问题本质是Angular变更检测在处理完全相同的对象时，无法区分不同行。默认情况下，*ngFor通过对象引用或浅比较跟踪行，当两个对象属性完全一致时，Angular可能会复用DOM元素，导致输入变更意外影响多行。

解决核心是给*ngFor添加trackBy函数，明确告诉Angular如何区分每一行：

• 如果数据有唯一ID（推荐后续给每个对象新增id字段），用ID作为跟踪标识；
• 若无唯一ID，直接用数组索引（虽非最优，但对重复数据场景有效）。

模板修改：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Leverage</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of m_backtestedBenchmarks; let i = index; trackBy: trackByIndex">
      <td>{{ item.name }}</td>
      <td>
        <input
          type="text"
          [value]="item.leverage"
          (change)="onLeverageChange($event, i)"
        />
      </td>
    </tr>
  </tbody>
</table>

TS代码新增trackBy函数：

trackByIndex(index: number, item: any): number {
  return index; // 用数组索引作为唯一跟踪标识
}

若后续给数据添加了唯一ID（如id字段），可改为：

trackById(index: number, item: any): string {
  return item.id; // 用对象唯一ID跟踪
}

2. 更符合Angular风格的输入绑定：双向绑定[(ngModel)] #

你当前用[value]搭配(change)的方式可行，但并非最贴合Angular的方案。推荐使用双向数据绑定[(ngModel)]，它能自动同步视图与数据，无需手动处理DOM元素取值和事件绑定。

注意：使用ngModel需在对应模块中导入FormsModule（如app.module.ts）：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他依赖
    FormsModule
  ]
})
export class AppModule { }

修改后的模板与TS代码：

<tr *ngFor="let item of m_backtestedBenchmarks; let i = index; trackBy: trackByIndex">
  <td>{{ item.name }}</td>
  <td>
    <input
      type="number" <!-- 用number类型适配数值输入，自动过滤非数字内容 -->
      [(ngModel)]="item.leverage"
      (blur)="onLeverageValidate(item)" <!-- 可选：在失去焦点时做数值验证 -->
    />
  </td>
</tr>

onLeverageValidate(item: any): void {
  // 示例：验证数值有效性，无效则重置默认值
  if (isNaN(item.leverage) || item.leverage <= 0) {
    item.leverage = 1.0;
  }
}

若项目使用响应式表单，可将数组包装为FormArray，这是复杂场景的最佳实践；但对于简单表格，ngModel足够简洁高效。

3. 处理含重复对象数组的最佳实践 #

• 给每个对象添加唯一标识：即使数据属性重复，也要给每个对象分配唯一id（如UUID、自增ID），从根源避免跟踪混淆，也方便后续的删除、查询等操作。
• 使用不可变更新策略：虽Angular支持直接修改数组元素，但不可变更新能提升变更检测效率，也适配OnPush变更检测模式。修改元素时，创建新对象替换原数组元素：

  updateLeverage(index: number, newValue: number): void {
    this.m_backtestedBenchmarks = this.m_backtestedBenchmarks.map((item, idx) => 
      idx === index ? { ...item, leverage: newValue } : item
    );
  }
  

• 强制使用trackBy：只要用*ngFor渲染数组，无论数据是否重复，都应添加trackBy函数，减少不必要的DOM销毁与重建，提升列表渲染性能。
• 避免依赖数组索引作为唯一标识：若数组存在排序、删除操作，索引会发生变化，此时优先使用对象自身的唯一ID作为trackBy依据。

内容的提问来源于stack exchange，提问作者Dayakar Kodirekka