Angular：如何将动态更新的隐藏输入框值同步至表格单元格？

核心问题分析 #

你当前的data[column]未随隐藏输入框更新，是因为隐藏输入框的value属性仅为单向赋值，未与data对象建立双向绑定或触发Angular变更检测，导致绑定的span无法感知值变化。

可行方案 #

方案1：双向绑定隐藏输入框到数据源（推荐）

直接将隐藏输入框与data对象的对应属性双向绑定，确保值变更实时同步到数据源，span直接绑定该数据源即可更新。

模板代码示例：

<!-- 动态表格行内的隐藏输入框 -->
<input 
  type="hidden" 
  [(ngModel)]="data[rowIndex][column]" 
  name="testHidden_{{rowIndex}}"  <!-- 动态name避免重复 -->
>
<!-- 单元格内的span -->
<td><span>{{data[rowIndex][column]}}</span></td>

注意事项：

• 确保data数组的每个行对象已初始化对应column的属性（如this.data.forEach(item => item[column] = '')）
• 若存在空值风险，可使用安全导航符：{{data[rowIndex]?.[column]}}

方案2：利用mat-autocomplete选择事件直接更新数据源

既然mat-autocomplete的选择功能正常，直接在选择事件中把选中值赋值给data对象，跳过隐藏输入框的中间层，更高效可靠。

模板代码：

<mat-autocomplete 
  #auto="matAutocomplete" 
  (optionSelected)="onOptionSelected($event, rowIndex, column)"
>
  <!-- 自动完成选项内容 -->
</mat-autocomplete>

<!-- 隐藏输入框（仅用于表单提交，可选） -->
<input type="hidden" [value]="data[rowIndex][column]" name="testHidden_{{rowIndex}}">
<!-- 单元格span -->
<td><span>{{data[rowIndex][column]}}</span></td>

组件类代码：

import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

// ...

onOptionSelected(event: MatAutocompleteSelectedEvent, rowIndex: number, column: string) {
  this.data[rowIndex][column] = event.option.value;
}

方案3：直接操作DOM获取隐藏输入框值（不推荐）

若必须通过DOM读取隐藏输入框值，可使用Angular的ViewChildren获取元素，手动同步到数据源：

模板代码：

<input 
  type="hidden" 
  #hiddenInput 
  [value]="selectedValue" 
  name="testHidden_{{rowIndex}}"
>
<td><span>{{displayValue}}</span></td>

组件类代码：

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

@ViewChildren('hiddenInput') hiddenInputs: QueryList<ElementRef>;

// 在mat-autocomplete选择事件中调用
syncSpanValue(rowIndex: number) {
  const inputElement = this.hiddenInputs.toArray()[rowIndex].nativeElement;
  this.data[rowIndex][column] = inputElement.value;
}

内容的提问来源于stack exchange，提问作者js-newb