Ag-grid 不会在 JHipster 应用程序中呈现（Angular 7 + Webpack 4）

Posted 2023-03-28

【中文标题】Ag-grid 不会在 JHipster 应用程序中呈现（Angular 7 + Webpack 4）

【英文标题】：Ag-grid will not render in JHipster app (Angular 7 + Webpack 4)

【发布时间】：2019-06-08 10:03:27

【问题描述】：

我已完全按照以下指南中的说明进行操作：

Get Started with ag-Grid in Your Angular Project

Angular Webpack 3

我的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 之间可能存在不兼容。

您能提出任何解决方案吗？谢谢！

【参考方案1】：

您应该在每个“实体”应用程序模块上导入 AgGridModule，而不是在主 apps.module.ts 上。