没有"new"就无法调用 Ag-Grid Angular cellRenderer 组件

Question

我试图获得一个自定义单元格渲染器类的工作。不幸的是，我在浏览器控制台得到以下错误(构建一切都很好):

ERROR TypeError: Class constructor WarningRendererComponent cannot be invoked without 'new'
at Adapter.getGui (ag-grid-community.cjs.js:35006:1)
at push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.afterCellRendererCreated (ag-grid-community.cjs.js:19379:1)
at ag-grid-community.cjs.js:9754:1
at new Promise (ag-grid-community.cjs.js:9729:1)
at push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.Promise.then (ag-grid-community.cjs.js:9752:1)
at createCellRendererFunc (ag-grid-community.cjs.js:19362:1)
at push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.AnimationFrameService.executeFrame (ag-grid-community.cjs.js:35597:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:391:1)
at Object.onInvokeTask (core.js:34182:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:390:1)

渲染器组件只是一个模板(目前没有任何功能):

export class WarningRendererComponent implements ICellRendererAngularComp {
value: any;
agInit(params: ICellRendererParams): void {
this.value = params.value;
}
refresh(params: ICellRendererParams) {
return false;
}
}

如何在父组件中集成:

{
headerName: 'Market Retail Price',
field: 'price',
width: 160,
editable: true,
cellEditorFramework: NumericEditorComponent,
cellRenderer: WarningRendererComponent,
valueGetter: (params: any) => params.data.price || params.data.oprice,
valueFormatter: (params: any) => this.numberFormatter(params.data.total_discount)
}

tsconfig.ts:

"compilerOptions": {
"target": "es2015",
},

一般信息:

• Ag Grid 24.1.0
• 角8.1.3

我实际上是按照下面的说明做的:https://www.ag-grid.com/angular-data-grid/component-cell-renderer/

使用预定义的单元渲染器组件之一，它工作正常。同样，使用另一种方法(而不是类，使用字符串并注册它)的结果是相同的。

函数方法可以工作，但对于我必须做的事情是不够的。

有人知道如何让组件工作吗?

Answer 1

找到解决方案。问题是我使用了cellRenderer。使用cellRendererFramework，它可以正常工作。

{
headerName: 'Market Retail Price',
field: 'price',
width: 160,
editable: true,
cellEditorFramework: NumericEditorComponent,
cellRendererFramework: WarningRendererComponent,
valueGetter: (params: any) => params.data.price || params.data.oprice,
valueFormatter: (params: any) => this.numberFormatter(params.data.total_discount)
}