如果未找到数据，ag-grid 将隐藏列标题下方的所有内容

Question

当我在 Angular 中使用给定固定高度的 ag-grid 时，在显示任何数据之前，将显示数据的空间（实际上是网格）在文本“加载”中可见。 在我的情况下这是不正确的，因为我没有将 rowData 绑定到 Observable 或 Promise 所以它不是异步的。 单击按钮后将填充网格。 我只想看到列标题，而没有列标题。 我的网格配置如下所示：

<ag-grid-angular
style="width: 100%; height: 335px;"
class="ag-theme-balham"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData"
animateRows
rowSelection="multiple"
>

所以我想隐藏除列标题之外的整个网格，直到 rowData 为空数组。 有没有办法做到这一点？

Answer 1

为了澄清起见，我将 ag-grid 与 React 一起使用，但两者之间有许多相似之处。 您可以在这里做两件事：

1. 您可以控制加载时哪些文本是可见的，或者如果没有数据

    [overlayLoadingTemplate]="<span></span>"
    [overlayNoRowsTemplate]="<span></span>"

2. 由于您当前正在为网格的内嵌样式设置固定高度，因此它始终为 335 像素。 一旦你将它设置为非静态的东西，你就可以将这个道具添加到网格中，它会根据里面的数据改变网格的高度。

[domLayout]="autoHeight"