2

我正在使用 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);
}

但是这种实现有时会不正确。

是否可以在不使用任何超时或类似的东西的情况下实现它？

4

1 回答 1

5

问题是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);
}

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

于 2019-09-17T12:51:16.337 回答