Angular：如何在TS中切换*ngFor循环内局部引用#fieldName的value值

你遇到的核心问题是试图通过DOM局部引用来管理循环中每个项的编辑状态，但这种方式在*ngFor里很难定位到当前操作的项——毕竟@ViewChild只会拿到第一个匹配的元素，@ViewChildren则会获取所有，没法单独控制某一项。

更符合Angular响应式思路的解决方案是把编辑状态直接绑定到每个field对象上，让每个数据项自己管理是否处于编辑状态，完全不需要依赖DOM局部引用。具体步骤如下：

1. 给每个字段添加编辑状态属性 #

在组件初始化时，为defaultFieldSelected数组里的每个字段添加一个isEditing属性，初始值设为false（表示默认不处于编辑状态）：

ngOnInit(): void {
  // 给每个字段添加编辑状态属性
  this.defaultFieldSelected = this.defaultFieldSelected.map(field => ({
    ...field,
    isEditing: false
  }));
}

2. 修改HTML模板，绑定状态到数据项 #

把原来依赖#fieldName.value的显示逻辑，替换为绑定field.isEditing，同时给点击事件直接切换状态：

<div *ngFor=" let field of defaultFieldSelected; let i = index;">
  <div>
    <!-- 非编辑状态：点击后切换为编辑状态 -->
    <span *ngIf="!field.isEditing" (click)="field.isEditing = true">
      {{field.name}}
    </span>
    <!-- 编辑状态：回车后关闭编辑，也可以加blur事件点击外部关闭 -->
    <input 
      type="text" 
      [value]="field.name" 
      *ngIf="field.isEditing" 
      (keydown)="editField($event, field, i)"
      (blur)="field.isEditing = false"
      #fieldVal
      (focus)="fieldVal.select()" <!-- 可选：获取焦点时选中全部文本，提升体验 -->
    />
  </div>
</div>

3. 更新TS中的编辑方法 #

在editField方法里，回车时更新字段值后，直接把当前field的isEditing设为false即可：

editField(e: KeyboardEvent, field: any, index: number): void {
  if (e.key === 'Enter') {
    e.preventDefault();
    // 更新字段值
    this.defaultFieldSelected[index].name = (e.target as HTMLInputElement).value;
    // 关闭当前项的编辑状态
    field.isEditing = false;
  }
  // 如果需要实时更新字段值（可选，根据需求决定）
  // this.defaultFieldSelected[index].name = (e.target as HTMLInputElement).value;
}

为什么这个方案更好？ #

• 完全遵循Angular的响应式编程模式，避免直接操作DOM，代码更易维护和调试
• 每个数据项的状态独立管理，不会出现误操作其他项的情况
• 逻辑更清晰，状态和数据绑定在一起，直观易懂

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