AG Grid技术问询：如何在可调整大小的div容器中实现自动自适应最大化显示？

这问题我之前做项目时也碰到过，firstDataRendered确实只在首次加载数据时触发，容器尺寸变化时完全不会响应。下面给你几个亲测有效的解决方案，分步骤说清楚：

方案一：用ResizeObserver监听容器尺寸变化（推荐） #

这个方法最精准，只会监听AG Grid所在容器的尺寸变化，不会受整个窗口resize的影响，适合容器动态调整的场景（比如侧边栏展开/收起、弹窗大小改变等）。

以Angular为例（从你的描述看应该是用Angular），实现步骤如下：

1. 在组件模板里给容器div加个模板引用变量：

<div #gridContainer style="width: 100%; height: 100%;">
  <ag-grid-angular
    [rowData]="yourRowData"
    [columnDefs]="yourColumnDefs"
    (gridReady)="onGridReady($event)"
    <!-- 其他配置 -->
  ></ag-grid-angular>
</div>

2. 在组件类里实现监听逻辑：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { GridApi } from 'ag-grid-community';

@Component({
  selector: 'app-your-grid-component',
  templateUrl: './your-grid.component.html'
})
export class YourGridComponent implements OnInit, OnDestroy {
  @ViewChild('gridContainer') gridContainer!: ElementRef;
  private resizeObserver: ResizeObserver | null = null;
  private gridApi!: GridApi;

  // 保存AG Grid的API引用
  onGridReady(params: any) {
    this.gridApi = params.api;
    // 首次加载时先适配一次
    this.gridApi.sizeColumnsToFit();
  }

  ngOnInit() {
    // 初始化ResizeObserver，监听容器尺寸变化
    this.resizeObserver = new ResizeObserver(() => {
      // 用requestAnimationFrame做简单防抖，避免频繁触发计算
      if (this.gridApi) {
        requestAnimationFrame(() => {
          this.gridApi.sizeColumnsToFit();
        });
      }
    });

    // 开始监听容器
    this.resizeObserver.observe(this.gridContainer.nativeElement);
  }

  // 组件销毁时记得断开监听，避免内存泄漏
  ngOnDestroy() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  }
}

方案二：监听窗口resize事件（适合容器尺寸随窗口变化的场景） #

如果你的容器大小是跟着窗口resize一起变化的，也可以直接监听window的resize事件，不过记得加防抖，避免频繁触发影响性能：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { GridApi } from 'ag-grid-community';

@Component({
  selector: 'app-your-grid-component',
  templateUrl: './your-grid.component.html'
})
export class YourGridComponent implements OnInit, OnDestroy {
  private gridApi!: GridApi;
  private debounceTimer: any;

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

  ngOnInit() {
    window.addEventListener('resize', this.handleResize.bind(this));
  }

  private handleResize() {
    // 防抖：200ms内只执行一次
    clearTimeout(this.debounceTimer);
    this.debounceTimer = setTimeout(() => {
      if (this.gridApi) {
        this.gridApi.sizeColumnsToFit();
      }
    }, 200);
  }

  ngOnDestroy() {
    window.removeEventListener('resize', this.handleResize.bind(this));
    clearTimeout(this.debounceTimer);
  }
}

关键注意事项 #

• 确保AG Grid的容器div设置了width: 100%; height: 100%;（或者具体的百分比/动态尺寸），这样网格才有可适配的空间
• 一定要在gridReady事件里保存gridApi，确保调用sizeColumnsToFit()时API已经初始化完成
• 如果是React/Vue等其他框架，思路完全一致：获取容器DOM元素，监听尺寸变化，调用AG Grid的sizeColumnsToFit()方法

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