在 Typescript 中使用 CellRenderer 时出现 Ag-grid 错误

Question

我正在使用 typescript 在 Iconic 中使用 Ag-grid 进行探索，并且正在考虑使用自定义 CellRenderer。

我已经在documentation 中定义了 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,。