如果未找到數據，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"