Question

我正在使用Angular 6和Ag-Grid进行测试。我已经做了一个示例并将其绘制，我的意思是css等。

但是，通过执行以下示例并从后端输入真实数据，不会绘制表格，并且始终“加载”中出现

// 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);
});
}
}

Answer 1

首先，您需要了解flow：

rowData-是不可变的-您无法像使用array那样进行操作，只需重新创建即可。 More info

您需要避免对任何操作使用gridOptions-仅用于初始化配置，对于其他任何操作-您需要使用gridApi-可以在onGridReady函数中访问< / p>

(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);
}

Answer 2

请尝试以下操作：

@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;
      });
  }

Angular 6和Ag-grid

2 个答案: