ag-grid valueGetter函数无法识别所属类实例成员问题求助

问题根因 #

问题本质是普通函数的this指向规则：你用普通匿名函数定义valueGetter时，函数被AG Grid调用的执行上下文会被绑定到AG Grid内部环境，不再指向你的AgColDef类实例，因此this.fieldName无法读取到类上的属性值。

解决方案 #

以下方案同时适用于valueGetter、valueSetter等所有AG Grid回调配置，完全匹配你封装通用列定义的需求：

方案1：箭头函数（推荐，TS/ES6+环境通用） #

箭头函数的this继承自定义时的外层作用域，不会被调用方修改，直接替换原匿名函数即可：

mycolDef() : ColDef{
  let myCD  : ColDef = {field : this.fieldName};
  myCD.headerText = 'header ' +  this.fieldName;
  myCD.editable = true;

  // 改用箭头函数，this指向当前AgColDef实例
  myCD.valueGetter = (params) => {
    return params.data[this.fieldName]; 
  };

  // valueSetter同理用箭头函数即可访问类实例属性
  myCD.valueSetter = (params) => {
    params.data[this.fieldName] = params.newValue;
    return true;
  };

  return myCD;
}

方案2：闭包缓存实例引用（兼容旧运行环境） #

如果你的运行环境不支持ES6语法，可以在函数外层提前缓存类实例的引用：

mycolDef() : ColDef{
  // 提前缓存当前AgColDef实例的引用
  const self = this;
  let myCD  : ColDef = {field : this.fieldName};
  myCD.headerText = 'header ' +  this.fieldName;
  myCD.editable = true;

  myCD.valueGetter = function(params) {
    return params.data[self.fieldName]; 
  };
  return myCD;
}

方案3：手动绑定函数上下文 #

也可以用bind方法强制把函数的this绑定到当前类实例：

myCD.valueGetter =  (function (params) {
  return params.data[this.fieldName];
}).bind(this);

内容的提问来源于stack exchange，提问作者greg