在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,