在ag-grid如何得到动态的header名字？

Question

我正在使用 ag-grid 和 angular。我希望其中一个列名是动态的。所以在 colDefs object 中，我没有为该列定义 headerName，而是定义了一个 headerValueGetter。

headerValueGetter: this.partnerHeaderValueGetter
'
partnerHeaderValueGetter(params) {

  return 'Select Partner';

}

我不想这样。有两个单选按钮，动态 header 的值将取决于选择了哪个单选按钮。但是函数 partnerHeaderValueGetter 的参数是具有 gridApi、columnApi etc.How 的参数，以使此函数知道不属于 ag-grid 的单选按钮？我想要工作的代码如下：

partnerHeaderValueGetter(params) {
  if (this.selectedSurveyLevel == 'Partner'){
    return 'Select Partners';
  }
  else if (this.selectedSurveyLevel == 'Site'){
    return 'Select Sites';
  }
  return 'Select Partners';
}

但是函数partnerHeaderValueGetter无法访问'this'，它是未定义的。

Answer 1

尝试改用箭头函数。您可能引用了错误的 this.

如果您使用 ES5 函数（如您的问题），this 将绑定到调用者上下文。
如果使用箭头函数，this将绑定到包含箭头函数的代码。

partnerHeaderValueGetter = (params) => {
  if (this.selectedSurveyLevel == 'Partner'){
    return 'Select Partners';
  }
  else if (this.selectedSurveyLevel == 'Site'){
    return 'Select Sites';
  }
  return 'Select Partners';
}

Answer 2

一种简单的方法是使用箭头函数代替普通函数：

someValueInComponent: string;
columnDef = [
    {
        headerValueGetter: (params) => this.someValueInComponent + ' some logic',
    }
];

在ag-grid如何得到动态的header名字？

In ag-grid how to get dynamic header name?

typescript

ag-grid

angular

ag-grid-angular