ag-grid(Angular)主/详情展开行无法自适应内容高度问题求助

我之前在项目里也碰到过一模一样的问题，ag-grid默认的详情行高度是固定的，内容多了要么出现滚动条要么被截断，折腾了几种方案终于搞定了，给你分享下：

方案一：使用ag-grid Enterprise版的自动高度功能（最简单） #

如果你用的是ag-grid Enterprise版本，直接开启官方原生支持的自动高度配置就行：

在你的ag-grid配置里添加关键参数：

gridOptions: GridOptions = {
  // 其他基础配置...
  masterDetail: true,
  detailRowAutoHeight: true, // 核心配置：开启详情行自动适配高度
  detailCellRendererParams: {
    detailGridOptions: {
      // 若详情是子表格，无需设置固定行高，让子表格自行适配内容
    }
  }
};

这个配置会让ag-grid自动计算详情行的实际内容高度，动态调整行高，完全能达到你想要的那种自适应效果。

方案二：社区版手动计算高度（无Enterprise版时用） #

如果用的是社区版，没有官方的自动高度功能，那就需要手动计算详情内容高度，再动态设置行高：

步骤1：在自定义详情组件中获取内容高度 #

假设你的详情是自定义组件DetailComponent，用ElementRef获取内容的实际渲染高度：

import { Component, ElementRef, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-detail',
  template: `
    <div class="detail-content">
      <!-- 这里放你的详情内容，比如文本、表单或子组件 -->
    </div>
  `,
  styles: [`
    .detail-content {
      padding: 12px;
      box-sizing: border-box;
    }
  `]
})
export class DetailComponent implements OnInit {
  @Input() rowNode: any; // 接收父组件传递的当前行节点

  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 用setTimeout确保组件内容渲染完成后再计算高度
    setTimeout(() => {
      const contentHeight = this.el.nativeElement.querySelector('.detail-content').offsetHeight;
      // 额外加一点边距，避免内容紧贴行边界
      const totalRowHeight = contentHeight + 24;
      // 通知ag-grid更新该行高度
      this.rowNode.setRowHeight(totalRowHeight);
      // 触发网格刷新，让高度生效
      this.rowNode.gridApi.onRowHeightChanged();
    }, 0);
  }
}

步骤2：在父组件中传递行节点给详情组件 #

在父组件的ag-grid配置里，把当前行的rowNode传递给详情组件：

gridOptions: GridOptions = {
  masterDetail: true,
  detailCellRenderer: 'detailComponent', // 注册自定义详情组件
  detailCellRendererParams: {
    // 传递行节点到详情组件
    getDetailRowData: (params) => {
      params.successCallback(params.data.detailData);
    }
  },
  // 注册框架组件
  frameworkComponents: {
    detailComponent: DetailComponent
  }
};

额外处理异步内容 #

如果详情内容是异步加载的（比如从接口获取数据），要在数据加载完成后再调用高度计算逻辑，比如在订阅数据的回调里执行calculateHeight方法：

// 示例：异步加载数据后计算高度
fetchDetailData().subscribe(data => {
  this.detailData = data;
  this.calculateHeight();
});

private calculateHeight() {
  setTimeout(() => {
    const contentHeight = this.el.nativeElement.querySelector('.detail-content').offsetHeight;
    const totalRowHeight = contentHeight + 24;
    this.rowNode.setRowHeight(totalRowHeight);
    this.rowNode.gridApi.onRowHeightChanged();
  }, 0);
}

补充：处理窗口 resize 场景 #

如果窗口大小变化导致详情内容高度改变，可以监听窗口resize事件，重新计算行高：

ngOnInit() {
  this.calculateHeight();
  // 监听窗口resize
  window.addEventListener('resize', () => this.calculateHeight());
}

ngOnDestroy() {
  // 组件销毁时移除监听，避免内存泄漏
  window.removeEventListener('resize', () => this.calculateHeight());
}

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