TypeScript实现Ag Grid ICellRenderer时eGui属性不存在报错问题

修复方案 #

1. 问题根因 #

TypeScript 要求类的属性必须提前显式声明，你在init方法里直接给this.eGui赋值，但没有在类的顶层定义该属性，所以触发了编译报错。同时现有代码还存在3处隐藏问题：

• init/refresh方法的入参没有加类型注解
• refresh方法里用到的this.eValue未定义
• 逻辑判断params.value !== '' || params.value !== undefined永远为真，属于逻辑短路错误
• 模板字符串里的#: xxx #是其他模板引擎的语法，在TS里不生效

2. 完整修正后的代码 #

import { ICellRenderer, ICellRendererParams } from 'ag-grid-community';
import {ErrorFilterView} from "./error-dialog/error-filter-view";

class MessageCellRenderer implements ICellRenderer {
  // 显式声明类属性，指定类型
  private eGui: HTMLElement;

  init(params: ICellRendererParams) {
    this.eGui = document.createElement('span');
    // 修复逻辑判断错误，判断值非空
    if (params.value != null && params.value !== '') {
      // 替换为TS模板字符串语法，根据实际业务字段调整取值逻辑
      this.eGui.innerHTML = `<span class="error_read_${params.value} error-item_${params.data.Id}">${params.data.Message}</span>`;
    }
  }

  public getGui() {
    return this.eGui;
  }

  public refresh(params: ICellRendererParams) {
    if (params.value != null && params.value !== '') {
      this.eGui.innerHTML = `<span class="error_read_${params.value} error-item_${params.data.Id}">${params.data.Message}</span>`;
    }
    // 返回true表示刷新成功，不需要重新创建渲染器实例
    return true;
  }

  public destroy() {
    // 按需添加事件清理等逻辑
  }
}

export var NotificationsDialogView = (viewModel : ErrorDialogViewModel) => {
  if (!viewModel.getIsInitialized()) return;

  var messageGrid: any;
  var config = (element : any, isInitialized : boolean, context : any) => {

    mdlInit(element, isInitialized, context);

3. 绑定生效说明 #

在AG Grid的列配置项中，给需要自定义渲染的列添加配置cellRenderer: MessageCellRenderer即可生效，原代码中重复的require('ag-grid-community')可以直接删除，统一用ES模块导入即可。

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