javascript - 如何从 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

这是一个旧帖子，但我希望这个答案可以帮助其他人，因为它对我帮助很大。

我使用异步函数通过 Fetch 检索数据到表格的单元格。无论我做什么，我总是得到 [Object Promise]然后我使用了 cellRenderer 而不是 ValueFormatter

我这里举个例子。我有一些数据与一些人和他们的公司 ID，我不希望用户在表中看到公司 ID，我希望他们看到公司名称。这些是列，我将 "company_id" 字段设置为 cellRenderer":

var columnDefsCuotas = [
       { field: 'user_id', width: 150 },
       { field: 'name', width: 250 },
       { field: 'company_id', width: 250, 
         cellRenderer: GetCompanyName
       }
 ]

然后我创建一个名为 GetCompanyName 的类，在这里我可以呈现表格的每个单元格以打印公司名称而不是公司 ID。我将 fetch 放在此类中以检索数据:

class GetCompanyName {
    // gets called once before the renderer is used
    async init(params) {

        // create the cell
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = `<span class="my-value"></span>`;

        // get references to the elements we want
        this.eValue = this.eGui.querySelector('.my-value');
    
        // set value into cell
        this.cellValue = this.getValueToDisplay(params);
        this.eValue.innerHTML = await getName(this.cellValue);
        
        async function getName(company_id) {
            let result = await fetch(`/fetch_companies?company_id=${company_id}`)
            let response = await result.json()
            console.log(response) // See if it is fetching the desired response data
            return response.company_name // I return only the parameter of the object I need to see
        }
    }
  
    getGui() {
        return this.eGui;
    }
  
    getValueToDisplay(params) {
        return params.valueFormatted ? params.valueFormatted : params.value;
    }
}

希望对你有所帮助。它对我来说就像一个魅力!