使用RxJS

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.colId);
    this.gridColumnApi.autoSizeColumns(allColumnIds);
}

别忘了在this.gridColumnApi事件上初始化onGridReady。