Angular4でag-gridを使用していると、以下のエラーメッセージが表示されます。
HTTP経由でjsonをフェッチした後、行データを表示しようとしています。
this.gridOptions.api.setRowData(this.gridOptions.rowData);
しかし、私のコードはエラーメッセージの下に作成されました。
エラーエラー:RedComponentComponentのコンポーネントファクトリが見つかりません。 @ NgModule.entryComponentsに追加しましたか?
これは私のアプリモジュールコードです。すでに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 { }
私の質問。このコードがこのコンポーネントを解決できない理由。
サーバーからデータをロードするときにstring
を `ComponentFactoryResolverに渡していますが、コンポーネントタイプである必要があります。
header.json
{
"headerName": "DetailCode",
"field": "detailCode",
"cellRendererFramework": "RedComponentComponent", // string
"width":100
},
それを解決するには、次のようなエントリコンポーネントマップを作成します。
entry-components.ts
import { RedComponentComponent } from './red-component/red-component.component';
export const entryComponentsMap = {
'RedComponentComponent': RedComponentComponent
};
そして、json文字列からコンポーネントクラスにロードをマッピングします
comm-code-grid-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];
}
});