Ag-grid：异步 valueFormatter？答案

【问题标题】：Ag-grid: Asynchronous valueFormatter?Ag-grid：异步 valueFormatter？
【发布时间】：2020-05-09 00:53:33
【问题描述】：

我有一个看似简单的问题困扰了我好几天。显然，在 ag-grid 的历史上没有其他人遇到过这个问题，因为完全没有 Google 搜索结果就表明了这一点。

我正在尝试为我的一列实现一个简单的值格式化程序。这是列定义...

    ...
    {
      headerName: 'OT Unit', 
      field: 'otUnitCode', 
      valueFormatter: this.formatOTUnit.bind(this)
    },
    ....

辅助函数“this.formatOTUnit(...)”定义如下：

  formatOTUnit(params) {
    console.log(params);
    this.service.getOTUnitDesc(params.data.otUnitCode).subscribe((desc) => {
      console.log(desc);
      return desc;
    });
  }

这个函数基本上取JSON中存储的数字代码，并调用一个异步函数来获取相应的描述。这个描述是我想在表格单元格中显示的内容（不是数字代码）。

console.log(params) 显示事件对象，其中包含需要翻译的代码 (params.data.otUnitCode)，console.log(desc) 显示正确的描述。但是，表格中的单元格是空白的。

我在这里缺少什么？ ag-grid 不支持异步回调作为 valueFormatter 吗？

【问题讨论】：

您的 formatOTUnit 函数是一个 void 函数，实际上并没有返回任何内容，因为 desc 的范围仍然是 getOTUnitDesc。但除此之外，valuegetter 和 valueformatter 只会返回可观察对象，因为它们是同步的。使用单元格渲染器 - 它们更灵活并支持异步性。 ag-grid.com/javascript-grid-cell-rendering-components
@nullptr.t - 将 valueFormatter 更改为 cellRenderer 仍然会产生相同的结果。
@brianbad 你试过强制刷新 Ag-grid 吗？或者在将数据传递给 ag-grid 之前对其进行格式化？
您可以在您尝试使用 cellRenderer 后发布代码吗？如果您在单元格渲染器类中正确实现了ICellRendererComp 接口，您会看到刷新方法...
@maury844 - 我尝试刷新网格但无济于事，尽管我没有考虑事先格式化数据。你会怎么做这样的事情？在我的 HTML 中，我只有标记，它只是开始自动加载。最初如何防止网格加载？

标签： angular ag-grid-angular

【解决方案1】：

问题似乎围绕着“this”全局引用在单元格渲染器中不可访问，因此“this.service”未定义。

我做了更多研究并找到了一种可能的解决方案。首先，gridOptions 需要定义一个引用服务组件的上下文。

this.gridOptions = {
  pagination: true,
  paginationAutoPageSize: true,
  context: {
    myService: this.myService
  }

然后，在单元格渲染器中：

otUnitRenderer(params) {
  var obsValue = undefined;
  var sub = params.context.myService.getOTUnitDesc(params.value).subscribe(v => obsValue = v);
  sub.unsubscribe();
  return "<span>" + params.value + " : " + obsValue +"</span>";
}

【讨论】：