使用 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 文档有一个详细描述的events 列表，在你的情况下，我猜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。