ag-grid 在 Angular 应用程序中不可见

Question

我正在不同的第三方网格上进行研发，这些网格具有可用的主从功能。

我已按照 Ag-Grid 网站中的步骤来渲染具有可扩展的主从网格的 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>

这是我的组件代码

<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>

有人可以指出我可能缺少什么吗？

Answer 1

我也遇到了类似的问题，原因是表格的高度为0。所以尝试这个css，看看问题是否解决。如果解决了，请将其设置为您想要的高度。

.ag-theme-alpine {
  min-height: 500px;
  height: 500px;
}

提示：您可以检查元素并检查表格是否实际呈现在屏幕中，但由于高度为 0 而不可见。