Angular 6和Ag-grid [英] Angular 6 and Ag-grid
问题描述
我正在使用Angular 6和Ag-Grid进行测试。我已经完成了一个示例,并对其进行了绘制,我的意思是css,依此类推。
I'm doing a test with Angular 6 and Ag-Grid. I have done an example and it paints it, I mean the css and so on.
但是通过执行以下示例并从后端输入真实数据,不会画桌子,并且一直都在加载中
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
// 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>
//组件
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);
});
}
}
推荐答案
第一个,您需要了解流:
rowData
-是不可变的-您不能像使用array那样进行操作,只需重新创建即可。 更多信息
rowData
- is immutable - you can't manipulate with is as with array, you can just re-create it. More info
您需要避免使用 gridOptions
用于任何操作-仅用于init-configuration,用于其他任何操作-您需要使用 gridApi
-可以在 onGridReady
函数
you need to avoid using gridOptions
for any action - it's only for init-configuration, for anything else - you need to use gridApi
- which could be accessed on onGridReady
function
(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);
}
这篇关于Angular 6和Ag-grid的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!