Angular项目中Ag-Grid主从网格空白无显示问题求助

调研Master-Detail（主从）功能的第三方网格组件，按Ag-Grid官方文档实现可展开主从网格后，应用渲染仅显示空白组件，控制台无任何报错信息。

相关代码 #

HTML代码

<div><p>ag-hierarchy-grid works!</p></div>
<div>
    <ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [masterDetail]="true"
    [detailCellRendererParams]="detailCellRendererParams"
    [rowData]="rowData"
    (firstDataRendered)="onFirstDataRendered($event)"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
</div>

组件代码

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import {
  ColDef,
  FirstDataRenderedEvent,
  GridReadyEvent,
  IDetailCellRendererParams,
} from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { IDocument, ITransaction } from './interfaces';


@Component({
  selector: 'app-ag-hierarchy-grid',
  templateUrl: './ag-hierarchy-grid.component.html',
  styleUrls: ['./ag-hierarchy-grid.component.scss']
})
export class AgHierarchyGridComponent implements OnInit {
  public columnDefs: ColDef[] = [
    // group cell renderer needed for expand / collapse icons
    { field: 'TransactionID' , cellRenderer: 'agGroupCellRenderer', hide: true },
    { field: 'Engagement',headerName: 'Engagement' },
    { field: 'DateAndTime',headerName: 'Date & Time of Request'  },
    { field: 'Service' ,headerName: 'Service' },
    { field: 'GroupSSL',headerName: 'Group/SSL' },
    { field: 'Types',headerName: 'Types(Forms)' },
    { field: 'ExtractionStatus',headerName: 'Overall Extraction Status' },
    { field: 'QCStatus',headerName: 'Quality Check Status' },
    { field: 'QCAnalyst',headerName: 'Quality Analyst' },
    { field: 'ParentDownloadAction',headerName: 'Action' }
  ];
  public defaultColDef: ColDef = {
    flex: 1,
  };
  public detailCellRendererParams: any = {
    detailGridOptions: {
      columnDefs: [
        { field: 'TransactionID' , hide: true },
        { field: 'DocName' ,headerName: 'Document Name' },
        { field: 'ExtractionStatus' ,headerName: 'Data Extraction Status' },
        { field: 'ChildDownloadAction',headerName: 'Action' }
        
      ],
      defaultColDef: {
        flex: 1,
      },
    },
    getDetailRowData: (params) => {
      params.successCallback(params.data.documents);
    },
  } as IDetailCellRendererParams<ITransaction, IDocument>;
  public rowData!: ITransaction[];
  constructor(private http: HttpClient) { }

  ngOnInit(): void {
  }
 

  onGridReady(params: GridReadyEvent<ITransaction>) {
    this.http
      .get<ITransaction[]>(
        'http://localhost:4200//src//assets//data.json'
      )
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

排查要点 #

• 网格容器高度塌陷：当前ag-grid-angular的父div未设置具体高度，仅给网格设置height:100%会导致高度计算为0。解决方法：给父div添加固定高度（如style="height: 600px;"），或直接给网格设置固定高度而非百分比。
• 数据请求路径错误：请求路径http://localhost:4200//src//assets//data.json存在多斜杠问题，Angular中访问assets文件直接使用/assets/data.json即可。建议在subscribe中添加error回调捕获请求异常：

  .subscribe((data) => {
    this.rowData = data;
  }, (error) => {
    console.error('数据加载失败:', error);
  });
  

• 展开按钮被隐藏：配置了agGroupCellRenderer的列被设置为hide: true，导致没有展开/折叠入口，用户无法触发详情面板。需将该列的hide改为false，或在其他列配置cellRenderer: 'agGroupCellRenderer'。
• Enterprise模块验证：虽然导入了ag-grid-enterprise，但无有效License时部分Enterprise功能会静默失效。可在组件中添加License验证代码（若有License），或检查是否因License缺失导致主从功能无法启用。
• 数据字段匹配问题：确认ITransaction接口中存在documents字段，且结构与IDocument完全匹配。若params.data.documents不存在，详情面板会无数据；若主数据加载失败，则整个网格会空白。

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