使用 RxJS 無法在 ag-Grid 中自動調整列大小

Question

我正在使用 ag-grid 在 UI 中表示一些數據。 使用 RxJS 設置行數據后，我遇到了自動調整列大小的問題。

我有一個設置數據的代碼：

this.accountingStoreService.getPurchaseOrders().subscribe(
  purchaseOrders => {
      this.gridApi.setRowData(purchaseOrders);
  }
);

如何調用 autoSize 以確保所有數據都已呈現？ 我試圖使用processRowPostCreate但它也無法在不設置超時的情況下工作：

this.gridOptions = {
  rowData: this.purchaseOrders,
  processRowPostCreate: (params) => {
    this.generateRowEvents(params);
  },
...
}

public generateRowEvents(params) {
   params.addRenderedRowListener('load', this.autoSizeColumns());
}

public autoSizeColumns() {
    const allColumnIds = [];
    this.gridColumnApi.getAllColumns().forEach(function (column) {
      if (!column.colDef.suppressSizeToFit) {
         allColumnIds.push(column.colId);
      }
    });
    setTimeout(() => {
      this.gridColumnApi.autoSizeColumns(allColumnIds);
    }, 300);
}

但是這種實現有時會錯誤地工作。

是否可以在不使用任何超時或類似的情況下實現它？

Answer 1

問題是您的autoSizeColumns方法在數據呈現在網格上之前被調用。 為了解決這個問題，您可以使用在行數據更改時觸發的網格事件。 ag-Grid 文檔有一個詳細描述的事件列表，在你的情況下，我猜rowDataChanged會很合適。

所以在你的模板上，你會有這樣的東西：

<ag-grid-angular 
    class="ag-theme-balham"
    [gridOptions]="gridOptions" 
    [rowData]="rowData"
    (gridReady)="onGridReady($event)" 
    (rowDataChanged)="autoSizeAll()">
</ag-grid-angular>

在您的控制器上：

autoSizeAll() {
    const allColumnIds = this.gridColumnApi.getAllColumns().map((column) => column.getColId());
    this.gridColumnApi.autoSizeColumns(allColumnIds);
}

只是不要忘記在onGridReady事件上初始化this.gridColumnApi 。