Angular 6和Ag

本文介绍了Angular 6和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: './competenceponent.html', styleUrls: ['./competenceponent.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 }]; thispetenceServicepetences().subscribe(response => { thispetences = response; this.gridOptions.rowData = new Array; thispetences.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 = []; thispetences.forEach((competence) => { youData.push({id: competence.id, name: competence.desc}); }); this.gridApi.setData(youData); }