如何从 ag-grid 中的 valueFormatter 调用异步函数

Question

我有一个 ag-grid 表，其中有一列带有值格式化程序：

{
    headerName: "My column",
    valueFormatter: getFormattedIndexValue,
    ...
}

来自getFormattedIndexValue我尝试调用异步函数：

async function getFormattedIndexValue (params) {
    if (!params.value) return;
    return await getDecodedValue(table, params.colDef.field, params.value);
}

这是异步函数的代码，我尝试调用：

async function getDecodedValue(table, field, value) {
    const query = `function=decode&table=${table}&field=${field}&value=${value}`;
    const response = await fetch('routines.php', { method: 'post', body: query, headers: {"Content-Type": "application/x-www-form-urlencoded"}});
    return response.text();
}

但是这样 valueFormatter 不会返回正确的值，导致[Object Promise]。有没有办法从 valueFormatter 调用异步函数并获得正确的结果

Answer 1

但据我了解，您想要有某种参考（值的键、数据库上的 id（作为键）和视图网格上的值（作为显示的值））——我说的对吗？

如果是这样，（应该使用valueFormatter 和valueParser）但没有异步调用， 您需要在 grid-init 进程中有您的键值对（字典）。

这是我的例子：

在 ag-grid 初始化过程中，我正在为 config.ComboData 中的列保存字典

valueFormatter = (params) => {
    return this.lookupValue(config.ComboData['columnNameHere'], params.value);
};
valueParser = (params) => {
     return this.lookupKey(config.ComboData['columnNameHere'], params.newValue);
}

valueFormatter 和 params.value - 在 ag-grid 渲染值时使用。

valueParser 和 params.newValue - 当您更新单元格值时。

这里looupValue和lookupKey函数from ag-grid doc和the sample

lookupValue(mappings, key:string) {
    return mappings[key];
}

lookupKey(mappings, name) {
    for (var key in mappings) {
        if (mappings.hasOwnProperty(key)) {
            if (name === mappings[key]) {
            return key;
            }
        }
    }
}