Question

angular + AG网格的新增功能，并尝试从AG Grid进行导出到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>

Answer 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作为说明。

如何修复无法读取未定义的属性'exportDataAsCsv'

1 个答案: