Angular 6 y Ag-grid
Estoy haciendo una prueba con Angular 6 y Ag-Grid. He hecho un ejemplo y lo pinta, me refiero al CSS y así sucesivamente.
Pero al hacer el siguiente ejemplo e ingresar los datos reales de mi Back-end no pinta la tabla y sale todo el tiempo "cargando"
// package.json
"dependencies": {
"ag-grid-angular": "^19.0.0",
"ag-grid-community": "^19.0.0",
// 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);
});
}
}