Angular & ag-grid: невозможно зарегистрировать компонент фреймворка с использованием frameworkComponents - PullRequest
Новая
       21

Angular & ag-grid: невозможно зарегистрировать компонент фреймворка с использованием frameworkComponents

0 голосов
/ 27 июня 2019

В рамках приложения Angular я занимаюсь разработкой таблицы на основе ag-grid и хочу отобразить определенную ячейку в виде ссылки html.

Поскольку я динамически создаю columnDef, я бы хотел избежать жесткого кодирования компонента средства визуализации ячеек ( ForeignKeyRendererComponent в приведенном ниже коде) в определении столбца.

К сожалению, я не могу зарегистрировать компоненты каркаса в соответствии с руководством: https://www.ag -grid.com / javascript-grid-components / # registering-framework-components

Когда я это делаю, я получаю эту ошибку:

Ошибка: не найдена фабрика компонентов для fkRenderer. Вы добавили это в @ NgModule.entryComponents

at noComponentFactoryError (core.js: 3256)

Единственный способ, которым это работает, - это ссылка на компонент средства визуализации ячеек непосредственно в определении столбца, например: cellRendererFramework: ForeignKeyRendererComponent.

Мои настройки и то, что я пробовал:

угловой v6.1.10

ag-grid v21.0.1

module.ts 

@NgModule({
  imports: [
    AgGridModule.withComponents([ForeignKeyRendererComponent]),
    ...
  ],
  declarations: [
    ForeignKeyRendererComponent,
    ...
  ],
  entryComponents: [
    ForeignKeyRendererComponent
  ],
});

component.html 

<ag-grid-angular style="height: 500px;"
                 class="ag-theme-balham"
                 [context]="context"
                 (gridReady)="onGridReady($event)"
                 [gridOptions]="gridOptions"
                 [frameworkComponents]="frameworkComponents"
                 [rowData]="rowData"
                 [columnDefs]="columnDefs"
                 rowSelection="multiple"
                 pagination=true
                 paginationPageSize=10>
</ag-grid-angular>

component.ts 

  private gridOptions: GridOptions = {
    defaultColDef: {
      filter: true
    },
    animateRows: true,
    isExternalFilterPresent: this.isExternalFilterPresent.bind(this),
    doesExternalFilterPass: this.doesExternalFilterPass.bind(this),
    frameworkComponents: { fkRenderer: ForeignKeyRendererComponent }
  };
...
this.columnDefs.push({
  headerName: translation,
  field: columnNames[index],
  sortable: true,
  filter: customFilter,
  editable: true,
  cellRendererFramework: 'fkRenderer'
});

Я также пытался указать frameworkComponents независимо от gridOptions: this.frameworkComponents = { fkRenderer: ForeignKeyRendererComponent }, но получил ту же ошибку.

РЕДАКТИРОВАТЬ: предложение пробовал Шон Лэндсман:

Те же рамки Определение компонентов: 

frameworkComponents = { fkRenderer: ForeignKeyRendererComponent };

Но с таким определением столбца: 

...
cellRenderer: 'fkRenderer'
...

В этом случае я получаю новую ошибку:

custom-error-handler.ts: 14 TypeError: Невозможно прочитать свойство 'componentFromFramework' из NULL в UserComponentFactory.push ../ node_modules / ag-grid-community / dist / lib / components / framework / userComponentFactory.js.UserComponentFactory.lookupComponentClassDef (userComponentFactory.js: 283) в CellComp.push ../ node_modules / ag-grid-community / dist / lib / render / cellComp.js.CellComp.chooseCellRenderer (cellComp.js: 632) в новом CellComp (cellComp.js: 80) в RowComp.push ../ node_modules / ag-grid-community / dist / lib / render / rowComp.js.RowComp.createNewCell (rowComp.js: 610) в rowComp.js: 594 в Array.forEach () в RowComp.push ../ node_modules / ag-grid-community / dist / lib / render / rowComp.js.RowComp.insertCellsIntoContainer (rowComp.js: 587) в RowComp.push ../ node_modules / ag-grid-community / dist / lib / render / rowComp.js.RowComp.refreshCellsInAnimationFrame (rowComp.js: 503) в AnimationFrameService.push ../ node_modules / ag-grid-community / dist / lib / misc / animationFrameService.js.AnimationFrameService.executeFrame (animationFrameService.js: 84) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 421) * 1 064 *

1 Ответ

1 голос
/ 28 июня 2019

Существует два способа регистрации компонентов - по имени или по прямой ссылке:

  • По имени: 
gridOptions or bind to ag-grid-angular directly:
frameworkComponents: {
    countryCellRenderer: CountryCellRenderer
}

columnDefs: [{
   field: 'country',
   cellRenderer: 'countryCellRenderer'
}]
  • По ссылке: 
columnDefs: [{
   field: 'country',
   cellRendererFramework: CountryCellRenderer
}]

В вашем случае я думаю, что вы смешиваете два - попробуйте изменить:

cellRendererFramework: 'fkRenderer'

на cellRenderer: 'fkRenderer'

...