jhipster angular 4中的ag-grid

Question

我正在尝试在 jhipster 项目中使用 ag-grid。将 ag-grid 添加到我的项目后，我在 app.module 中导入了模块：

{AgGridModule} from 'ag-grid-angular';

我修改了组件以使用 ag-grid：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';

import { Typapp } from './typapp.model';
import { TypappService } from './typapp.service';
import { ITEMS_PER_PAGE, Principal, ResponseWrapper } from '../../shared';
import {ColDef, ColumnApi, GridApi} from 'ag-grid';

@Component({
    selector: 'jhi-typapp',
    templateUrl: './typapp.component.html'
})
export class TypappComponent implements OnInit, OnDestroy {
    typapps: Typapp[];
    typs: Typapp[]
    currentAccount: any;
    eventSubscriber: Subscription;
    /**
     * Declarations AG-GRID
     */
    // rowdata and column definitions
    rowData: Typapp[];
    columnDefs: ColDef[];
    // gridApi and columnApi
    api: GridApi;
    columnApi: ColumnApi;

    constructor(
        private typappService: TypappService,
        private jhiAlertService: JhiAlertService,
        private eventManager: JhiEventManager,
        private principal: Principal
    ) {
        this.columnDefs = this.createColumnDefs();
    }

    loadAll() {
        this.typappService.query().subscribe(
            (res: ResponseWrapper) => {
                this.typapps = res.json;
            },
            (res: ResponseWrapper) => this.onError(res.json)
        );
    }
    ngOnInit() {
        this.loadAll();
        this.principal.identity().then((account) => {
            this.currentAccount = account;
        });
        this.registerChangeInTypapps();
        /**
         * modif component aggrid
         */
        this.typappService.findAll().subscribe(
            (rowData) => {
                this.rowData = rowData
        },
            (error) => {
                console.log(error);
        }
        )
    }

    ngOnDestroy() {
        this.eventManager.destroy(this.eventSubscriber);
    }

    trackId(index: number, item: Typapp) {
        return item.id;
    }
    registerChangeInTypapps() {
        this.eventSubscriber = this.eventManager.subscribe('typappListModification', (response) => this.loadAll());
    }

    private onError(error) {
        this.jhiAlertService.error(error.message, null, null);
    }

    /**
     * AG GRID fonctions
     */
    // one grid initialisation, grap the APIs and auto resize the columns to fit the available space
    onGridReady(params): void {
        this.api = params.api;
        this.columnApi = params.columnApi;

        this.api.sizeColumnsToFit();
    }

    // create some simple column definitions
    private createColumnDefs() {
        return [
            {field: 'id'},
            {field: 'libTyp'},
        ]
    }
}

有component.html的代码

<h6> without AGRID</h6>
<div *ngFor="let rd of rowData">
    <span>{{rd.id}}</span>
    <span>{{rd.libTyp}}</span>
</div>
<br/>
<h6> with AGRID</h6>
<ag-grid-angular style="width: 100%; height: 800px;"
                 class="ag-theme-fresh"
                 (gridReady)="onGridReady($event)"
                 [columnDefs]="columnDefs"
                 [rowData]="rowData">
</ag-grid-angular>

结果如下：

我做错了什么？为什么我使用 ag-grid 时没有结果？

即使在控制台中也没有错误。

非常感谢。

Answer 1

我有同样的问题。您是否将ag-theme-fresh.css 导入到vendor.css？这对我有用。

\src\main\webapp\content\css\vendor.css：

...
@import '~ag-grid/dist/styles/ag-theme-fresh.css';