在 ag-grid 如何获取动态标题名称？答案

【问题标题】：In ag-grid how to get dynamic header name?在 ag-grid 如何获取动态标题名称？
【发布时间】：2020-12-31 10:59:38
【问题描述】：

我正在使用带角度的 ag-grid。我希望列名之一是动态的。因此，在该列的 colDefs 对象中，我没有定义 headerName，而是定义了 headerValueGetter。

headerValueGetter: this.partnerHeaderValueGetter
'
partnerHeaderValueGetter(params) {

  return 'Select Partner';

}

我不想这样。有两个单选按钮，动态标题的值将取决于选择了哪个单选按钮。但是函数 partnerHeaderValueGetter 的参数是具有 gridApi、columnApi 等的参数。如何让这个函数知道不属于 ag-grid 的单选按钮？我想工作的代码如下：

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

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

【问题讨论】：

标签： angular typescript ag-grid ag-grid-angular

【解决方案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';
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢，你的回答是正确的，它显然对我有帮助。我只能接受一个正确答案，因此接受另一个答案以进行更详细的解释。