gpt4 book ai didi

angular - 使用 RxJS 在 ag-Grid 中自动调整列大小不起作用

转载 作者:行者123 更新时间:2023-12-02 20:29:35 27 4
gpt4 key购买 nike

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

但是这种实现有时无法正常工作。

是否可以在不使用任何超时或类似内容的情况下实现它?

最佳答案

问题在于您的 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

关于angular - 使用 RxJS 在 ag-Grid 中自动调整列大小不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49148162/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com