jiplster 각도 4의 ag-grid

Question

나는 jipster 프로젝트에서 ag-grid를 사용하려고합니다. 내가 AG-그리드를 사용하기 위해 구성 요소를 수정

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

가 :

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'}, 
     ] 
    } 
} 

구성 요소의 코드가 내 프로젝트에 AG-그리드를 추가 한 후, 나는 app.module에 모듈을 수입

<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> 

.html 파일을 이것은 결과 :

내가 뭘 잘못하고있어? 내가 왜 그리드를 사용할 때 아무런 결과가 없나요?

콘솔에서도 오류가 없습니다.

대단히 감사합니다.

Answer 1

나는 동일한 문제가있었습니다. ag-theme-fresh.css을 vendor.css으로 가져 왔습니까? 이것은 나를 위해 속임수를했다.

\ SRC \ 주 \의 웹 애플리케이션 \ 내용 \ CSS \ vendor.css :

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