TypescriptでCellRendererを使用するとAgグリッドエラーが発生する

Question

TypeCriptを使用してIconicでAg-gridを使用していて、カスタムCellRendererを使用して調べています。

私はdocumentationのようにICellRendererインターフェイスの以下の基本的な実装を定義したが、例のように活字体ではなく、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 

    }; 
} 

と列の定義でそれをassigndている...

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が定義されていない。..次の呼び出し失敗しているように思われます。 （bundle.jsで）生成されたjsファイルを見てみると

が、私のCellRendererクラスがあやふやに包まれます。..

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-グリッドdoesImplementICellRendererに問題があります（そして回避策がありますか？）

ありがとうございました！

Answer 1

ここでの問題は、その新しいインスタンスを列の定義に渡すのではなく、cellRenderer: new HighlightCellRenderer(),の代わりにcellRenderer: HighlightCellRenderer,を使用する必要があるということです。