AG-Grid 异步 valueGetter？ （总是返回 [object Promise]）

Question

我正在使用 AG-Grid（在 React 中，但在任何框架中都可以进行解释），并在我的 colDef 上应用了一个自定义的“valueGetter”，它在将单元格值返回以显示在其中之前对单元格值执行计算/格式细胞。

当前（按预期运行）：

const defaultColDef = {
  valueGetter: (params) => {
    const result = doCalcFormat(params);  //doCalcFormat applies calculations and formats
    return result;
    },
 }

我正在尝试为“doCalcFormat”函数添加异步功能，以便其内部可以从 API 获取数据，然后使用该数据进行计算/格式化，然后 then 将最终值返回给 valueGetter。

但是，当我将

async

关键字应用于我的 valueGetter 时，我的所有单元格都填充了 [object Promise] 而不是实际值

尝试：

const defaultColDef = {
   valueGetter: async (params) => {             //added 'async'
    const result = await doCalcFormat(params);  //an async version of 'doCalcFormat()' was made
    console.log(result);                       //always logs expected result
    return result;
   },
}

async function doCalcFormat(params) {
    const res = await loadDataFunction();   //async func
    return res;
}

但是当表格加载时：

//表格填充[object Promise]

我的问题是，为什么会发生这种情况以及如何等待“doCalcFormat”完成其操作然后返回我的 valueGetter？即使我将“doCalcFormat”保留为普通函数，它仍然会做同样的事情，让我认为 valueGetter 中的“async”正在抛弃它

Answer 1

我通过使用自定义 javascript 单元格渲染器解决了这个问题（React/Angular 单元格渲染器要慢得多......）：

import { ICellRendererComp, ICellRendererParams } from "ag-grid-community";

export type AsyncCellParams = ICellRendererParams & { promise: (params: AsyncCellParams) => Promise<string> };

export class AsyncCellComponent implements ICellRendererComp {
  private eGui: HTMLElement;

  public getGui(): HTMLElement {
    return this.eGui;
  }

  public refresh(params: AsyncCellParams): boolean {
    return true;
  }

  public init(params: AsyncCellParams): void {
    this.eGui = document.createElement("div");
    // daisy ui skeleton
    this.eGui.innerHTML = `<div class="skeleton h-4 w-full"></div>`;
    void params.promise(params).then((value) => {
      // after promise is resolved, set the value and refresh cell
      this.eGui.innerHTML = value;
      params.refreshCell();
    });
  }
}

使用方法如下：

columnDefinition.cellRenderer = AsyncCellComponent;
columnDefinition.cellRendererParams = {
  promise: async (params: AsyncCellParams) =>
    (await this.selectViewService.getSelectViewModel(params.data[key], schemaForKey))?.label
};