Angular中如何将ag-grid编辑后的单元格值传递至后端？

1. 修正添加行逻辑 #

你当前的onAddRow方法存在错误，rowNode.setDataValue是用于修改已有行数据的方法，新增行时应初始化空对象或带默认值的对象。

2. 配置可编辑列 #

确保DeviceMacAddress列开启编辑功能，让用户能在单元格中输入内容。

3. 获取全量数据并提交 #

ag-grid提供getRowData()或forEachNode方法获取当前表格所有行数据（包括初始加载和新增编辑后的行），直接通过HTTP请求发送给服务器即可。

完整代码示例 #

Component TypeScript 代码

import { Component, ViewChild } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { ColDef, GridApi, RowNode } from 'ag-grid-community';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-device-grid',
  templateUrl: './device-grid.component.html',
  styleUrls: ['./device-grid.component.css']
})
export class DeviceGridComponent {
  @ViewChild('agGrid') agGrid!: AgGridAngular;
  private gridApi!: GridApi;

  // 列配置
  columnDefs: ColDef[] = [
    { 
      headerName: '设备MAC地址', 
      field: 'DeviceMacAddress',
      editable: true, // 开启单元格编辑
      flex: 1
    },
    // 可添加其他列配置
  ];

  // 初始行数据（从服务器加载）
  rowData: any[] = [];

  constructor(private http: HttpClient) {}

  // 表格初始化完成后获取gridApi
  onGridReady(params: any) {
    this.gridApi = params.api;
    // 模拟从服务器加载初始数据
    this.loadInitialData();
  }

  // 加载初始数据
  loadInitialData() {
    this.http.get<any[]>('/api/devices').subscribe(data => {
      this.rowData = data;
    });
  }

  // 添加新行
  onAddRow() {
    // 新增空行，用户后续可编辑DeviceMacAddress
    this.gridApi.updateRowData({
      add: [{ DeviceMacAddress: '' }]
    });
  }

  // 提交所有数据到服务器
  onSubmitData() {
    // 收集当前表格所有行数据
    const allRowData: any[] = [];
    this.gridApi.forEachNode((node: RowNode) => allRowData.push(node.data));
    
    // 发送POST请求到服务器
    this.http.post('/api/devices/save', allRowData).subscribe({
      next: (response) => {
        console.log('数据提交成功', response);
        // 可添加提交成功后的逻辑，如提示、刷新表格
      },
      error: (error) => {
        console.error('数据提交失败', error);
        // 错误处理逻辑
      }
    });
  }

  // 可选：监听单元格编辑完成事件，做数据校验或同步
  onCellValueChanged(params: any) {
    console.log('单元格数据更新:', params.data);
    // 可添加MAC地址格式校验等逻辑
  }
}

HTML 模板代码

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  (cellValueChanged)="onCellValueChanged($event)"
>
</ag-grid-angular>

<div style="margin-top: 10px;">
  <button (click)="onAddRow()">ADD ROW</button>
  <button (click)="onSubmitData()" style="margin-left: 10px;">提交到服务器</button>
</div>

关键说明 #

• gridApi获取：通过gridReady事件拿到表格API实例，所有行操作（添加行、获取数据）都依赖它。
• 单元格编辑：列配置中editable: true开启编辑后，ag-grid会自动将编辑内容同步到行对象，无需手动调用setDataValue。
• 全量数据提交：用forEachNode遍历所有行节点，收集完整数据后通过HttpClient发送给服务器接口。
• 编辑事件监听：cellValueChanged事件可在编辑完成后触发，用于实时数据校验或同步。

内容的提问来源于stack exchange，提问作者Abi.D