[英]Angular 6 and Ag-grid
I'm doing a test with Angular 6 and Ag-Grid.我正在使用 Angular 6 和 Ag-Grid 进行测试。 I have done an example and it paints it, I mean the css and so on.我做了一个例子,它描绘了它,我的意思是 css 等等。
But by doing the example below and enter the real data from my Back-end does not paint the table and comes out all the time "loading"但是通过执行下面的示例并从我的后端输入真实数据并没有绘制表格并且一直在“加载”
// package.json // 包.json
"dependencies": {
"ag-grid-angular": "^19.0.0",
"ag-grid-community": "^19.0.0",
// HTML // HTML
<div class="container-fluid">
Competencias
</div>
<div class="jumbotron text-center">
<ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-theme-balham" [gridOptions]="gridOptions">
</ag-grid-angular>
</div>
// COMPONENT // 成分
import { Component, OnInit } from '@angular/core';
import { environment } from '@env/environment';
import { CompetenceService } from '@app/services/competence.service';
import { GridOptions } from 'ag-grid-community';
@Component({
selector: 'app-competence',
templateUrl: './competence.component.html',
styleUrls: ['./competence.component.scss'],
providers: [CompetenceService],
})
export class CompetenceComponent implements OnInit {
version: string = environment.version;
title = 'app';
rowData: any;
columnDefs: any;
competences: any[];
gridOptions: GridOptions;
constructor(private competenceService: CompetenceService) { }
ngOnInit() {
this.gridOptions = <GridOptions>{};
this.gridOptions.columnDefs = new Array;
this.gridOptions.columnDefs = [
{
headerName: 'ID',
field: 'id',
width: 100
},
{
headerName: 'Nombre',
field: 'name',
width: 200
}];
this.competenceService.competences().subscribe(response => {
this.competences = response;
this.gridOptions.rowData = new Array;
this.competences.forEach((competence) => {
this.gridOptions.rowData.push({
id: competence.id, name: competence.desc
});
});
console.log(this.gridOptions);
});
}
}
First, you need to understand the flow :首先,您需要了解流程:
rowData
- is immutable - you can't manipulate with is as with array, you can just re-create it.rowData
-是不可变的- 你不能像数组一样操作它,你可以重新创建它。 More info更多信息you need to avoid using
gridOptions
for any action - it's only for init-configuration, for anything else - you need to usegridApi
- which could be accessed ononGridReady
function您需要避免将gridOptions
用于任何操作 - 它仅用于初始化配置,用于其他任何操作 - 您需要使用gridApi
- 可以在onGridReady
函数上访问
(gridReady)="onGridReady($event)"
...
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
let youData = [];
this.competences.forEach((competence) => {
youData.push({id: competence.id, name: competence.desc});
});
this.gridApi.setData(youData);
}
Try as below:尝试如下:
@Component({
selector: "my-app",
template: `<div style="height: 100%; box-sizing: border-box;">
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
[rowData]="rowData"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[defaultColGroupDef]="defaultColGroupDef"
[columnTypes]="columnTypes"
[enableFilter]="true"
[floatingFilter]="true"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
</div>`
})
export class AppComponent {
private gridApi;
private gridColumnApi;
private rowData: any[];
private columnDefs;
private defaultColDef;
private defaultColGroupDef;
private columnTypes;
constructor(private http: HttpClient) {
this.columnDefs = [
{
headerName: 'ID',
field: 'id',
width: 100
},
{
headerName: 'Nombre',
field: 'name',
width: 200
}
];
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.http
.get(
"https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
)
.subscribe(data => {
this.rowData = data;
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.