Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular Ag网格:异步valueFormatter?_Angular_Ag Grid Angular - Fatal编程技术网

Angular Ag网格:异步valueFormatter?

Angular Ag网格:异步valueFormatter?,angular,ag-grid-angular,Angular,Ag Grid Angular,我有一个看似简单的问题困扰了我好几天。显然,在ag grid的历史上,没有任何一个像谷歌搜索结果的完全缺失所表明的那样出现过这个问题 我正在尝试为我的一个列实现一个简单的值格式化程序。这是列定义 ... { headerName: 'OT Unit', field: 'otUnitCode', valueFormatter: this.formatOTUnit.bind(this) }, .... 助手函数“this.fo

我有一个看似简单的问题困扰了我好几天。显然,在ag grid的历史上,没有任何一个像谷歌搜索结果的完全缺失所表明的那样出现过这个问题

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

    ...
    {
      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的异步回调?

问题似乎围绕着单元格呈现程序中无法访问的“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>";
}
otUnitRenderer(参数){
var OBSBVALUE=未定义;
var sub=params.context.myService.getOTUnitDesc(params.value).subscribe(v=>obsValue=v);
sub.取消订阅();
返回“+params.value+”:“+obsValue+”;
}

问题似乎围绕着单元格呈现程序中无法访问的“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>";
}
otUnitRenderer(参数){
var OBSBVALUE=未定义;
var sub=params.context.myService.getOTUnitDesc(params.value).subscribe(v=>obsValue=v);
sub.取消订阅();
返回“+params.value+”:“+obsValue+”;
}

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