如何将Angular Mat Table编辑行的数据存储到变量并传给后端

我来帮你搞定这个问题！其实你的核心需求实现起来很简单——因为你已经用[(ngModel)]做了双向绑定，编辑时已经实时修改了数据源里的对象属性，只需要在Update按钮的方法里正确读取这个数据源就行。

问题分析 #

你当前的update()方法里的this.value是未定义的，没有关联到表格的数据源，所以无法拿到编辑后的最新值。

具体解决方案 #

1. 直接读取数据源的最新数据

假设你的组件里已经用MatTableDataSource初始化了表格数据，那么直接通过this.dataSource.data就能获取到所有包含更新后值的对象数组。

2. 修改update()方法

更新你的update()函数，读取并处理最新数据：

update() {
  // 获取所有编辑后的表格数据
  const updatedData = this.dataSource.data;
  console.log('更新后的完整数据:', updatedData);
  
  // 这里可以直接把updatedData传给后端API，示例用HttpClient提交
  // this.http.put('/api/approval/update', updatedData).subscribe({
  //   next: (response) => {
  //     console.log('后端更新成功', response);
  //     // 可选：更新后退出所有行的编辑状态
  //     updatedData.forEach(item => item.editable = false);
  //     this.dataSource.data = [...updatedData]; // 触发表格刷新
  //   },
  //   error: (err) => console.error('更新失败', err)
  // });
}

3. 可选：优化编辑体验

如果希望点击Update后自动退出所有编辑状态，可以在请求成功后遍历数据，重置editable状态并刷新表格：

update() {
  const updatedData = this.dataSource.data;
  console.log('待提交数据:', updatedData);

  // 模拟后端请求（实际替换为你的API调用）
  setTimeout(() => {
    // 重置所有行的编辑状态
    updatedData.forEach(item => item.editable = false);
    // 用扩展运算符触发Angular变更检测，刷新表格
    this.dataSource.data = [...updatedData];
    alert('数据已成功提交！');
  }, 1000);
}

4. 确认组件数据源初始化

确保你的组件类里正确初始化了数据源，示例如下：

import { MatTableDataSource } from '@angular/material/table';

export class ApprovalComponent {
  displayedColumns: string[] = ['key', 'value', 'actions'];
  // 初始数据示例，确保每个对象都有editable属性
  dataSource = new MatTableDataSource([
    { key: '申请人', value: 'Manisha', editable: false },
    { key: '申请类型', value: '权限开通', editable: false },
    { key: '申请日期', value: '2024-05-20', editable: false }
  ]);

  edit(e: any) {
    e.editable = !e.editable;
  }

  update() {
    const updatedData = this.dataSource.data;
    console.log('更新后的数据:', updatedData);
    // 这里添加后端提交逻辑
  }
}

为什么这个方案可行？ #

因为你使用了[(ngModel)]="element.value"双向绑定，当你在输入框修改值时，已经直接修改了dataSource.data中对应对象的value属性。所以点击Update时，this.dataSource.data就是包含所有编辑后值的最新数组，直接传给后端即可。

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