在Typescript中使用CellRenderer时发生Ag-grid错误

Question

我正在探索使用打字稿在Iconic中使用Ag-grid，并正在研究使用自定义CellRenderer。

我已经在文档中定义了ICellRenderer接口的以下基本实现，但是在示例中使用Typescript而不是Javascript。

import {AgGridNg2} from 'ag-grid-ng2/main'
import {GridOptions} from 'ag-grid/main'
import {ICellRenderer} from 'ag-grid/main'

export class HighlightCellRenderer implements ICellRenderer {
  public eGui: any;
  public eValue: any;

  // gets called once before the renderer is used
  public init(params) {
    // create the cell
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = 'Oh hello';

    // set value into cell
   this.eValue.innerHTML = params.value;    
 };

  // gets called once when grid ready to insert the element
  public getGui() {
    return this.eGui;
  };

  // gets called whenever the user gets the cell to refresh
   public refresh(params) {
     // set value into cell again
     this.eValue.innerHTML = params.value;
   };

 // gets called when the cell is removed from the grid
 public destroy() {
   // do cleanup, remove event listener from button

  };
}

并将其分配给“列定义” ...

this.columnDefs = [
        {
            headerName: "ID", field: "equipment.description", sortingOrder:    ["asc", "desc"],
            editable: true, width: 100,
            cellRenderer: new HighlightCellRenderer(),
            ...

当我运行它时，我收到了由cellRenderingService.js中的以下几行引起的异常。

   var cellRendererFunc = cellRenderer;
   resultFromRenderer = cellRendererFunc(params);  <----

   // Exception is...
   ORIGINAL EXCEPTION: TypeError: cellRendererFunc is not a function
   ORIGINAL STACKTRACE:
  TypeError: cellRendererFunc is not a function
     at CellRendererService.useCellRenderer     (http://localhost:8100/build/js/app.bundle.js:54880:34)
at RenderedCell.useCellRenderer ...

原因似乎以下调用失败。

CellRendererService.prototype.doesImplementICellRenderer = function (cellRenderer) {
    // see if the class has a prototype that defines a getGui method. this   is very rough,
    // but javascript doesn't have types, so is the only way!
    return cellRenderer.prototype && 'getGui' in cellRenderer.prototype;
};

callRenderer没有定义的.prototype 。

查看生成的js（在bundle.js中），我的CellRenderer类包装在一个iffy中。

var HighlightCellRenderer = (function () {
function HighlightCellRenderer() {
}
// gets called once before the renderer is used
HighlightCellRenderer.prototype.init = function (params) {
    // create the cell
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = 'Oh hello';
    // set value into cell
    this.eValue.innerHTML = params.value;
};
;
// gets called once when grid ready to insert the element
HighlightCellRenderer.prototype.getGui = function () {
    return this.eGui;
};
;
// gets called whenever the user gets the cell to refresh
HighlightCellRenderer.prototype.refresh = function (params) {
    // set value into cell again
    this.eValue.innerHTML = params.value;
};
;
// gets called when the cell is removed from the grid
HighlightCellRenderer.prototype.destroy = function () {
    // do cleanup, remove event listener from button
};
;
return HighlightCellRenderer;
 }());
  exports.HighlightCellRenderer = HighlightCellRenderer;

我在这里做错了什么的ag-grid doesImplementICellRenderer是否有问题（并且有解决方法）？

在此先感谢您的帮助！

Answer 1

这里的问题是我需要将组件而不是组件的新实例传递给列定义，即，代替cellRenderer: new HighlightCellRenderer(), ，，使用cellRenderer: HighlightCellRenderer,