在Typescript中使用CellRenderer時出現Ag-grid錯誤

[英]Ag-grid Error when using CellRenderer in Typescript


I am exploring using Ag-grid in Iconic using typescript, and am looking at using a custom CellRenderer.

我正在探索使用標題文字在Iconic中使用Ag-grid,我正在尋找使用自定義CellRenderer。

I have defined the following basic implementation of the ICellRenderer interface as in the documentation but using Typescript rather than Javascript as in the example...

我已經在文檔中定義了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

  };
}

and assignd it in the Column definitions...

並在列定義中賦予它...

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

When I run it I get an exception that is caused by the following lines in cellRenderingService.js..

當我運行它時,我得到一個由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 ...

The cause seems to the the following call is failing..

原因似乎是以下調用失敗..

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 does not have .prototype defined.

callRenderer沒有定義.prototype。

Looking at the generated js (in bundle.js), my CellRenderer class is wrapped in an iffy..

查看生成的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;

Is there a problem with the ag-grid doesImplementICellRenderer of have I done something wrong here (and is there a work around)?

ag-grid doesImplementICellRenderer是否存在問題,我在這里做錯了(並且有解決方法)嗎?

Thanks in advance for any help!

在此先感謝您的幫助!

1 个解决方案

#1


2  

The problem here was I need to pass the component, not an a new instance of it to the column definition, ie instead of cellRenderer: new HighlightCellRenderer(),, use cellRenderer: HighlightCellRenderer,.

這里的問題是我需要將組件,而不是它的新實例傳遞給列定義,即代替cellRenderer:new HighlightCellRenderer(),使用cellRenderer:HighlightCellRenderer。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/07/02/d6ad75757be879bebfdb2b9cadb5d484.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com