我正在尝试用JHipster实现ag-grid .

我已经按照以下两个链接来配置它 .

我正在使用sass所以我的app / content / scss / vendor.scss有： -

...
$ag-icons-path: '~ag-grid/src/styles/icons/';  // as per https://github.com/ag-grid/ag-grid/issues/1950
@import "node_modules/ag-grid/src/styles/ag-grid";
@import "node_modules/ag-grid/src/styles/ag-theme-balham";
...

app / vendor.ts文件： -

...
// ag-grid
import 'ag-grid/dist/styles/ag-grid.css'; 
import 'ag-grid/dist/styles/ag-theme-balham.css';

import 'ag-grid-angular/main';
...

mycomponent.html有： -

<div>
<span>  Grid Location </span>
<ag-grid-angular 
                style="width: 500px; height: 500px;" 
                class="ag-theme-balham"
                [rowData]="rowData" 
                [columnDefs]="columnDefs"
                >
            </ag-grid-angular>
        </div>

mycomponent.ts： -

private gridOptions:GridOptions;
    public rowData:any[];
    private columnDefs:any[];
constructor()
{
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}
        ];
}

我没有在控制台上收到任何错误，但UI显示 ag-grid 的空白区域 . （我按照教程中的说明配置模块和其他设置）
enter image description here

angular webpack jhipster ag-grid