jhipster angular 4中的ag网格
我试图在jhipster项目中使用ag网格。将ag grid添加到我的项目后,我在app.module中导入了模块:jhipster angular 4中的ag网格,jhipster,ag-grid,Jhipster,Ag Grid,我试图在jhipster项目中使用ag网格。将ag grid添加到我的项目后,我在app.module中导入了模块: {AgGridModule} from 'ag-grid-angular'; 为了使用ag网格,我修改了组件: import { Component, OnInit, OnDestroy } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Subsc
{AgGridModule} from 'ag-grid-angular';
为了使用ag网格,我修改了组件:
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>
不带AGRID
{{rd.id}}
{{rd.libTyp}}
与阿格里德
我做错了什么?为什么使用ag网格时没有结果
即使在控制台中也没有错误
非常感谢。我也有同样的问题。您是否已将ag theme fresh.css
导入vendor.css
?这对我起了作用
\src\main\webapp\content\css\vendor.css:
...
@import '~ag-grid/dist/styles/ag-theme-fresh.css';
我也有同样的问题。您是否已将ag theme fresh.css
导入vendor.css
?这对我起了作用
\src\main\webapp\content\css\vendor.css:
...
@import '~ag-grid/dist/styles/ag-theme-fresh.css';
我也有同样的问题,我在使用sass,所以Jhipster默认情况下不提供vendor.css,我尝试了相同的方法,但没有为我提供任何想法?我也有同样的问题,我在使用sass,所以Jhipster默认情况下不提供vendor.css,我尝试了相同的方法,但没有为我提供任何想法?