Angular：如何在ngFor循环中通过单向绑定获取输入框值？

你说得对，双向绑定([(ngModel)])确实会直接修改原数据，导致取消按钮无法还原初始值，所以选择单向绑定的思路完全没问题。下面给你两个更清晰、易维护的优化方案：

方案一：为每个列表项维护独立临时编辑值 #

这个方案最直观，给dataList里的每个对象添加一个临时字段存储输入框的修改内容，只有点击「保存」时才同步到原字段，点击「取消」时直接重置临时值即可。

实现步骤： #

1. 初始化数据时，给每个项添加tempValue字段，默认和原value保持一致
2. 输入框单向绑定到tempValue，实时更新临时值
3. 保存时把tempValue同步到原value，取消时将tempValue重置为原value

代码示例： #

<div *ngFor="let d of dataList">
  <input type="text" [value]="d.tempValue" (input)="d.tempValue = $event.target.value">
  <button *ngIf="!d.open" (click)="d.open = true; d.tempValue = d.value;">修改</button>
  <button *ngIf="d.open" (click)="save(d.id, d.tempValue); d.open = false; d.value = d.tempValue;">保存</button>
  <button *ngIf="d.open" (click)="d.open = false; d.tempValue = d.value;">取消</button>
</div>

// 组件内数据初始化示例
dataList = [
  { id: 1, value: '初始值1', open: false, tempValue: '初始值1' },
  { id: 2, value: '初始值2', open: false, tempValue: '初始值2' }
];

save(id: number, newValue: string) {
  // 调用后端保存接口
  // saveDb(id, newValue);
}

这个方案的优点是逻辑清晰，每个列表项的编辑状态完全独立，不会出现你之前用全局newVal导致的多项值混淆问题。

方案二：使用ViewChildren批量获取输入框实例 #

如果不想给数据结构添加额外字段，可以用@ViewChildren来收集所有输入框的引用，结合循环索引对应到具体列表项，直接操作输入框的值。

代码示例： #

<div *ngFor="let d of dataList; let i = index">
  <input #inputEl type="text" [value]="d.value">
  <button *ngIf="!d.open" (click)="d.open = true;">修改</button>
  <button *ngIf="d.open" (click)="save(d.id, inputEl.value); d.open = false;">保存</button>
  <button *ngIf="d.open" (click)="d.open = false; inputEl.value = d.value;">取消</button>
</div>

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  dataList = [
    { id: 1, value: '初始值1', open: false },
    { id: 2, value: '初始值2', open: false }
  ];

  @ViewChildren('inputEl') inputElements!: QueryList<ElementRef<HTMLInputElement>>;

  save(id: number, newValue: string) {
    // 保存后同步原数据（可选，根据业务需求决定）
    const targetItem = this.dataList.find(item => item.id === id);
    if (targetItem) {
      targetItem.value = newValue;
    }
    // 调用后端保存接口
    // saveDb(id, newValue);
  }
}

这里避开了动态模板引用变量的坑（Angular不支持#inputValue_{{d.id}}这种写法），通过统一的#inputEl标记输入框，再用ViewChildren收集成列表，取消按钮直接把原d.value赋值回输入框即可。

方案对比 #

• 方案一更适合复杂场景（比如需要实时校验编辑内容、多字段联动编辑），临时值可以单独处理逻辑
• 方案二更轻量化，不需要修改原有数据结构，适合简单的单字段编辑需求

这两个方案都彻底避免了双向绑定的副作用，逻辑也比你之前的ngModelChange+全局变量更清晰，每个列表项的状态独立可控。

内容的提问来源于stack exchange，提问作者BYUNGJU JIN