Ag-grid v27.X在*ngIF中异常：栈溢出、数据不更新及实例销毁咨询

我正在使用Ag-grid v27.X，通过*ngIf控制网格的显示隐藏，代码如下：

<ng-container *ngIf="isLoaded">
  <ag-grid-angular [gridOptions]="gridOptions"  
                   (gridReady)="gridReady($event)" 
                   (selectionChange)="onSelectionChange($event)"
                   [showCheckBoxSelection]="true"
                   ></ag-grid-angular>
</ng-container>

根据用户操作切换网格显示状态时，第二次显示会抛出以下错误，且网格保留旧数据不加载新数据：

maximum call stack size exceeded

组件中在ngOnInit里调用initGrid()方法初始化列定义：

initGrid() {
    this.gridOptions.columnDefs = [columns here]
}

移除*ngIf后网格运行正常，已知*ngIf会每次创建新的Ag-Grid实例，请问如何销毁之前的实例？

1. 手动销毁Ag-Grid实例 #

在组件中保存网格实例引用，在隐藏前主动调用销毁方法：

• 先在gridReady中保存实例：

private gridApi: any;

gridReady(event: any) {
  this.gridApi = event.api;
}

• 在控制网格隐藏的逻辑中，先销毁实例再切换状态：

hideGrid() {
  if (this.gridApi) {
    this.gridApi.destroy(); // 销毁当前网格实例
    this.gridApi = null;
    this.gridOptions = {}; // 重置gridOptions，避免复用旧配置
  }
  this.isLoaded = false;
}

2. 用CSS替代*ngIf控制显示隐藏 #

不通过*ngIf销毁组件，改用CSS的display属性控制显示隐藏，避免重复创建实例：

<ag-grid-angular 
  [style.display]="isLoaded ? 'block' : 'none'"
  [gridOptions]="gridOptions"  
  (gridReady)="gridReady($event)" 
  (selectionChange)="onSelectionChange($event)"
  [showCheckBoxSelection]="true"
></ag-grid-angular>

这种方式下网格实例只会创建一次，切换显示时直接重置数据即可：

showGrid(newData: any[]) {
  this.isLoaded = true;
  if (this.gridApi) {
    this.gridApi.setRowData(newData); // 加载新数据
    this.gridApi.refreshCells(); // 刷新单元格
  }
}

3. 重置gridOptions避免旧引用 #

如果坚持使用*ngIf，每次显示前重新创建gridOptions对象，避免残留旧实例的引用：

showGrid() {
  this.initGrid(); // 重新初始化列定义
  this.isLoaded = true;
}

initGrid() {
  this.gridOptions = { // 每次创建新的gridOptions对象
    columnDefs: [columns here]
  };
}

注意不要直接修改现有gridOptions的属性，而是创建全新对象，避免旧实例引用导致循环调用。

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