Angular中修改RowData后Ag-grid无法刷新的问题

我帮你排查了这个问题，核心原因和Angular的变更检测机制以及Ag-Grid的数据更新逻辑有关：

当你直接用push方法往原rowData数组里添加元素时，数组的引用并没有发生变化——本质上还是同一个数组对象。Angular的变更检测是通过监听引用变化来触发视图更新的，所以这种情况下Ag-Grid感知不到数据的变化，自然不会刷新视图。而你在编辑器修改代码触发热重载时，相当于重新初始化了数组引用，Ag-Grid就能识别到新数据了。

给你两种可行的解决方案：

方案1：创建新数组触发变更检测（推荐） #

这种方式符合Angular响应式编程的习惯，通过替换数组引用来让Angular自动触发变更检测，Ag-Grid会同步更新视图。

修改你的addRow方法：

addRow() {
  const newRow = { make: 'New Car', model: 'New Model', price: 50000 };
  // 使用扩展运算符创建新数组，替换原引用
  this.rowData = [...this.rowData, newRow];
  console.log(this.rowData);
}

这里的[...this.rowData, newRow]会把原数组的所有元素复制到新数组中，再添加新元素，让this.rowData指向一个全新的数组对象，Angular的变更检测会立刻捕捉到这个变化，通知Ag-Grid刷新显示新数据。

方案2：使用Ag-Grid API手动刷新视图 #

如果你需要更细粒度的控制（比如只更新特定单元格），可以通过Ag-Grid提供的API手动触发刷新：

1. 首先在模板中监听gridReady事件，获取Grid API：

<ag-grid-angular
  ...
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

2. 在组件中保存API实例，并在添加数据后调用刷新方法：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private gridApi: any;
  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ];

  onGridReady(params: any) {
    this.gridApi = params.api;
  }

  addRow() {
    const newRow = { make: 'New Car', model: 'New Model', price: 50000 };
    this.rowData.push(newRow);
    // 手动刷新所有单元格
    this.gridApi.refreshCells();
    // 或者重新设置行数据
    // this.gridApi.setRowData(this.rowData);
    console.log(this.rowData);
  }
}

两种方案都能解决你的问题，方案1更简洁且符合Angular的设计理念，优先推荐。

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