我已完全按照以下指南中的说明进行操作:
我的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 之间可能存在不兼容。
你会提出任何解决方案吗?谢谢!