Как исправить Невозможно прочитать свойство 'exportDataAsCsv' из неопределенного

Question

Новичок в angular + AG grid и попытка реализовать экспорт в CSV, работающий из AG Grid, но получающий «Не удается прочитать свойство» exportDataAsCsv «undefined» при нажатии кнопки фактического экспорта.Прошел пример на примере на сайте AG Grid.

Компонент:

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { DashboardComponent } from '../dashboard/dashboard.component';

@Component({
  selector: 'app-projectvariations',
  templateUrl: './projectvariations.component.html',
  styleUrls: ['./projectvariations.component.css']
})
export class ProjectvariationsComponent implements OnInit {

  private gridApi;

  /* Define our Grid Name & Column definitions for AGGrid */
  title = 'variations'

  // Define our Columns
  columnDefs = [

    { headerName: 'Number', field: 'Number', sortable: true, filter: true, width: 120 },
    { headerName: 'Revision', field: 'Revision', sortable: true, filter: true, width: 70 },
    { headerName: 'Type', field: 'Type', sortable: true, filter: true, width: 100 },
    { headerName: 'Description', field: 'Description', sortable: true, filter: true, width: 930 },
    { headerName: 'Date', field: 'Date', sortable: true, filter: true, width: 80 },
    { headerName: 'Client PO', field: 'Client PO', sortable: true, filter: true, width: 100 },
    { headerName: 'Status', field: 'VarStatusName', sortable: true, filter: true, width: 100 },
    { headerName: 'Currency', field: 'Currency', sortable: true, filter: true, width: 100 },
    { headerName: 'Value', field: 'Value', sortable: true, filter: true, width: 100 },
    { headerName: 'AUD Value', field: 'Value AUD', sortable: true, filter: true, width: 100 }

  ];

  onBtExport() {
    var params = {
      skipHeader: false,

    };

   this.gridApi.exportDataAsCsv(params);
  }
  // 
  @Input() projid:string=""; 

  /** rowData var */
  rowData: any;

// Function which sets params to new HttpParams, sets them to projID input and passes to api.
getVars(projid: string) {
  const params = new HttpParams()
  .set('ProjID', projid)

  this.rowData = this.http.get('http://localhost:5000/ProjectVariations?', { params });
}


  //Add HttpClient for use in constructor
  constructor(private http: HttpClient) { }

  ngOnInit() {

    this.getVars(this.projid)

  }

HTML: HTML-код компонента

<div ag-grid="gridOptions" class="ag-theme-bootstrap" >

<h2>Project Variations</h2>
<label style="margin-left: 0px;"> <button (click)="onBtExport()">Export to 
CSV</button> </label>

  <ag-grid-angular 
      style="height: 500px;" 
      class="ag-theme-balham"
      [rowData]="rowData | async" 
      [columnDefs]="columnDefs"
      >
  </ag-grid-angular>

</div>

Answer 1

Вам необходимо присвоить this.gridApi значение API ag-grid. Вы можете сделать это, используя событие GridReady (см. здесь .

Измените свой HTML-код на:

<ag-grid-angular 
      style="height: 500px;" 
      class="ag-theme-balham"
      [rowData]="rowData | async" 
      [columnDefs]="columnDefs"
      (gridReady)="onGridReady($event)"
      >
</ag-grid-angular>

Обратите внимание на событие gridReady.

Затем в свой компонент добавьте:

onGridReady(params) {
     this.gridApi = params.api; 
}

Взгляните на этот StackBlitz как иллюстрацию этого с использованием вашего кода.