Я полностью следовал инструкциям в следующих руководствах:
Начало работы с ag-Grid в вашем угловом проекте
Угловой рулон 3
My app.module.ts включает в себя:
import { AgGridModule } from 'ag-grid-angular';
...
@NgModule({
imports: [
...,
AgGridModule.withComponents([])
]
})
В vendor.css
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
В home.component.ts:
import { Component, OnInit } from '@angular/core';
import {GridOptions} from 'ag-grid-community';
@Component({
selector: 'jhi-home',
templateUrl: './home.component.html',
styleUrls: ['home.css']
})
export class HomeComponent implements OnInit {
private gridOptions: GridOptions;
public rowData: any[];
private columnDefs: any[];
constructor(
private accountService: AccountService,
private loginModalService: LoginModalService,
private eventManager: JhiEventManager
) {
this.gridOptions = <GridOptions>{
onGridReady: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
this.columnDefs = [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
];
this.rowData = [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
];
}
ngOnInit() {
}
}
В итоге в шаблон я добавил компонент:
<ag-grid-angular #agGrid style="width: 500px; height: 300px;"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData">
</ag-grid-angular>
Хотя при сборке ошибок нет, сетка не будет отображаться. Так выглядит мой HTML после компиляции:
Полагаю, может быть несовместимость между Angular 7 / Webpack 4 / способом, которым Jhipster загружает приложение, и ag-grid-angular.
Вы бы предложили какое-нибудь решение? Спасибо!