Angular动态数据表中如何实现双向绑定？

我来帮你搞定这个动态表格的双向绑定问题，先理清楚为什么你之前的写法行不通，再给你两种可行的解决方案：

问题根源分析 #

1. 单向绑定无法同步回数据源：你一开始用的[value]="column.cell(row, column)"只是把row对应属性的值显示在输入框里，属于单向数据流。当你修改输入框内容时，这个变化不会自动写回row对象，所以this.result里的数据自然还是旧的。
2. 双向绑定语法不支持函数调用：尝试用[(value)]="column.cell(row, column)"报错，是因为Angular的双向绑定（[(xxx)]）本质是[xxx]="..."加(xxxChange)="..."的语法糖，它要求绑定的目标是一个可赋值的属性，而column.cell(row, column)是函数调用，返回的是一个值，没办法直接对它赋值，所以模板解析器会抛出错误。

解决方案一：手动绑定输入事件更新数据源 #

这是最直接的实现方式，通过监听输入框的input事件，手动把新值同步到row对象里：

修改模板代码 #

把原来的input标签替换成下面的写法：

<input matInput 
       [placeholder]="column.label" 
       [value]="column.cell(row, column)"
       (input)="updateRowData(row, column, $event.target.value)">

在TypeScript中添加更新方法 #

在你的组件类里新增updateRowData函数：

updateRowData(row: any, column: any, newValue: any): void {
  // 直接更新row对应的属性（因为row是this.result里对象的引用，修改它会同步到this.result）
  row[column.columnDef] = newValue;
  
  // 可选：手动触发数据源刷新，确保表格UI同步（MatTable有时会自动检测变化，加这行更保险）
  this.dataSource.data = [...this.dataSource.data];
}

这样修改输入框内容时，新值会立刻同步到row对象，this.result里的数据也会跟着更新，再打印this.result就能看到最新值了。

解决方案二：封装列的读写逻辑（更优雅的方式） #

如果想把数据读写逻辑封装到列配置里，让模板更简洁，可以改造你的列定义：

修改TypeScript列构建代码 #

把原来的列对象改成包含getValue和setValue的结构：

let mhd = {
  columnDef: eachColumns['columnName'],
  label: eachColumns['displayName'],
  getValue: (row: any) => row[eachColumns['columnName']],
  setValue: (row: any, value: any) => row[eachColumns['columnName']] = value
};
this.columns.push(mhd);
this.displayedColumns = this.columns.map(c => c.columnDef);
this.dataSource = new MatTableDataSource(this.result);

修改模板中的input绑定 #

用ngModel配合ngModelChange实现双向绑定：

<input matInput 
       [placeholder]="column.label"
       [ngModel]="column.getValue(row)"
       (ngModelChange)="column.setValue(row, $event)">

这种方式把每列的读写逻辑都封装在列配置里，模板代码更清晰，后续维护也更方便。

额外说明 #

因为this.dataSource是基于this.result创建的，而JavaScript中对象是引用类型，所以你修改row对象的属性时，本质就是修改this.result数组里对应的对象，不需要额外复制数组（除非你用的是不可变数据模式）。

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