angular - 使用 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>

在你的 Controller 上:

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

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