Ag-Grid Angular自定义单元格渲染器报错：需用new调用类构造函数

核心问题定位 #

你错误使用了cellRenderer配置项——该属性仅适用于原生JavaScript渲染器；Angular组件类型的渲染器必须使用cellRendererFramework，与你配置cellEditorFramework的规则一致。

具体修复步骤 #

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)
   }
   

2. 确保组件在模块中正确注册
   在对应Angular模块的declarations和entryComponents数组中声明WarningRendererComponent（Angular 8及以下版本需配置entryComponents，因为Ag Grid会动态创建组件实例）：

   @NgModule({
     declarations: [
       // ...其他组件
       WarningRendererComponent
     ],
     entryComponents: [
       // ...其他动态组件
       WarningRendererComponent
     ]
   })
   export class YourModule { }
   

   你也可以通过AgGridModule.withComponents([WarningRendererComponent])的方式注册，效果与entryComponents一致，二选一即可。

3. 保留现有tsconfig配置
   你的target: es2015配置符合Ag Grid 24.1.0与Angular 8.1.3的兼容要求，无需修改。

额外说明 #

• 预定义渲染器正常工作是因为它们是Ag Grid内置的原生渲染器，使用cellRenderer配置是正确的；但自定义Angular组件必须匹配cellRendererFramework配置项。
• 若尝试过字符串形式注册组件，需对应使用cellRendererFramework: 'warningRenderer'，同时确保组件已通过上述模块注册方式完成声明。

内容的提问来源于stack exchange，提问作者Lev Jad