在使用带有angular4的ag-grid时,我遇到了以下错误消息.
this.gridOptions.api.setRowData(this.gridOptions.rowData);
ERROR Error: No component factory found for RedComponentComponent. Did
you add it to @NgModule.entryComponents?
这是我的app模块代码.我已经设置为entryComponents了.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AgGridModule} from "ag-grid-angular/main";
import { AppComponent } from './app.component';
import { MyGridApplicationComponent } from './my-grid-application/my-grid-application.component';
import { RedComponentComponent } from './red-component/red-component.component';
@NgModule({
imports: [
BrowserModule,AgGridModule.withComponents(
[RedComponentComponent]
),FormsModule,HttpModule
],declarations: [
AppComponent,MyGridApplicationComponent,RedComponentComponent
],entryComponents: [
RedComponentComponent
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
我的问题.为什么此代码无法解析此组件.
解决方法
从服务器加载数据时,您将字符串传递给ComponentFactoryResolver,但它应该是组件类型.
header.json
{
"headerName": "DetailCode","field": "detailCode","cellRendererFramework": "RedComponentComponent",// string
"width":100
},
要解决它,我会创建入口组件映射,如：
入门components.ts
import { RedComponentComponent } from './red-component/red-component.component';
export const entryComponentsMap = {
'RedComponentComponent': RedComponentComponent
};
然后将加载从json字符串映射到组件类
COMM-代码并网option.service.ts
private fetchColumnDefs() {
console.log("fetchColumnDefs()");
this.http.get(this.API_URI + "resident/header.json").subscribe(
r => {
this.gridOptions.columnDefs = r.json();
this.gridOptions.columnDefs.forEach((x: any) => {
if (x.cellRendererFramework) {
x.cellRendererFramework = entryComponentsMap[x.cellRendererFramework];
}
});
