ag-grid 如果未找到数据，则隐藏列 headers 下的所有内容

Question

当我将给定高度的 ag-grid 与 Angular 一起使用时，在显示任何数据之前，space 将显示数据（实际上是网格）与文本一起显示'loading'。在我的情况下这是不正确的，因为我没有将 rowData 绑定到 Observable 或 Promise，所以它不是异步的。单击按钮后将填充网格。我只想看到 headers 列，下面什么也没有。我的网格配置如下所示：

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

所以我想隐藏除列 headers 之外的整个网格，直到 rowData 为空数组。有办法吗？

Answer 1

澄清一下，我将 ag-grid 与 React 结合使用，但两者之间有很多相似之处。您可以在这里做两件事：

您可以控制在加载时或在没有数据时显示哪些文本

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

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

[domLayout]="autoHeight"

ag-grid 如果未找到数据，则隐藏列 headers 下的所有内容

ag-grid hiding everything below column headers if no data found

html

javascript

ag-grid

angular