如何修复无法读取未定义的属性“exportDataAsCsv”答案

【问题标题】：How to fix Cannot read property 'exportDataAsCsv' of undefined如何修复无法读取未定义的属性“exportDataAsCsv”
【发布时间】：2019-11-02 18:08:38
【问题描述】：

Angular + AG 网格的新手并尝试从 AG 网格实现导出到 CSV，但在单击实际导出按钮时出现“无法读取未定义的属性 'exportDataAsCsv'”。已经浏览了 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>

【问题讨论】：

private gridApi; 从未被赋值
我已经在 ngOnInit 之前给它赋值了，但仍然得到同样的错误：onGridReady(params) { this.gridApi = params.api; }
您的网格是否按预期呈现？请分享您的导出按钮模板 [html]。你也可以分享这个组件的html吗？
嗨，是的，网格确实按预期呈现。我已更新以包含 html。

标签： angular ag-grid

【解决方案1】：

您需要为 this.gridApi 分配 ag-grid api 的值。您可以使用GridReady 事件来执行此操作（请参阅here。

将您的 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; 
}

查看this StackBlitz 作为使用您的代码的说明。

【讨论】：