Ag grid Angular 10 ag grid无法设置属性“setRowData”，因为gridOptions.api未定义

我正在使用以下版本

角度CLI:10.0.1

节点：12.18.2

操作系统：win32 x64

角度：10.0.2

@ag网格社区/angular@23.2.1

@ag网格社区/所有-modules@23.2.1

我采用以下方法：

import { Component, OnInit, ViewChild, Output } from '@angular/core';
import { SummaryDataService } from '../services/data/summary-data.service';
import {AgGridService} from  '../services/common/ag-grid.service';
import {  UtilService } from '../services/common/util.service';
import { GridOptions } from '@ag-grid-community/all-modules'; 
import { FilterComponent } from '../common/filter/filter.component';

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.css']
})
export class SummaryComponent implements OnInit {
  errorMessage: any =  null;
  noResults: boolean;
  summaryData: Array<any>;
  columnDefs: any;
  defaultColWidth: number = 200;
  numberColWidth: number = 120;
  defaultColDef: any;
  innerHeight: any;
  gridOptions: GridOptions;
  test: any;
  currentDateTo: string;
  currentDateFrom: string;
  pendingRequest: any;
  
  constructor(
    private summaryService: SummaryDataService,
    private agGridServ: AgGridService,
    private util: UtilService,
  ) {
    this.innerHeight = 450; 
    this.errorMessage = null;
  }
  
  ngOnInit(): void {
    this.noResults = false;
    this.gridOptions = <GridOptions> {
      columnDefs: this.createColumnDefs(),
       onGridReady: () => {
         this.gridOptions.api.sizeColumnsToFit();
       },
      rowHeight: 48,
      headerHeight: 48,
      pivotMode: true,
      enableSorting: true,
      enableColResize: true,
      enableFilter: true,
      showToolPanel: true,
      enableRangeSelection: true,
      sortingOrder: ['asc', 'desc'],
      suppressAggFuncInHeader: true,
      suppressCopyRowsToClipboard: true,
      filter: 'text'
    }    
  }
  
  private createColumnDefs() {
    return [
      { 
        headerName: "Name", 
        field: "name", 
        width: this.defaultColWidth, 
        sortable: true, 
        resizable: true, 
        filter: true
      },
      {
        // Other columns definition
      }
    ];
  }
  
  handleUserSelection(selection) {
    this.getSummaryData();
  }
  
  getSummaryData(selections: any): void {
    this.summaryData = []
    this.errorMessage = null;
    this.noResults = false;
    this.summaryService.loadSummaryData()
      .subscribe (
      data => {
        this.summaryData = data;
        this.noResults = this.summaryData.length === 0;
        if(!this.gridOptions.api){
          return;
        }
        this.gridOptions.api.setRowData(this.summaryData);
      },
      error => {
        this.errorMessage = <any>error;
      }
    );
  }
}

基本上，在ngOnInit中，我正在初始化gridOptions gridOptions；但我的数据将在稍后根据一些检查和用户输入获取

因此，当我尝试使用setRowData时，它失败了，因为this.gridOptions.api未定义

---

如何解决此问题？

实际上，如果您仍然存在此问题，则应将代码粘贴到调用handleUserSelection方法的位置

顺便说一句，您的代码有一个明确的问题，这可能会导致此.gridOptions未定义：

---

您忘记取消订阅observer，这可能会导致问题和内存泄漏。

尝试在网格初始化后设置api

---

您必须使用onGridReadyparams方法。您可以从params.api之类的参数获取gridApi，您必须按如下方式使用它。网格创建完成后，将引发一个事件，表明它已准备就绪。事件执行分配给该事件的函数，如以下代码所示。根据文档页面，AgGridEvent有两个属性：api和columnApi。因此，您可以通过引发事件的参数获取此属性，如params.api。你可以把它分配给你想要的任何东西。从网格中创建、更新和检索行需要Api属性

─ AgGridEvent
        │     api: GridAPI, // see Grid API
        │     columnApi: ColumnAPI // see Column API

代码

---

在gridOptions初始化中，对象的api属性在哪里？您在哪里调用了handleUserSelection？感谢您的输入，我在html代码中错过了它。在我添加和未定义的错误消失。但是，在这之后，结果不会呈现在UI上，不会出现明显的错误。我正在进一步调查此事。

this.summaryService.loadSummaryData()
  .subscribe (...)

─ AgGridEvent
        │     api: GridAPI, // see Grid API
        │     columnApi: ColumnAPI // see Column API

<!-- IN HTML PAGE -->
<ag-grid-angular
    (gridReady)='onGridReady($event)'>
</ag-grid-angular>

 // in TYPE SCRIPT File
  onGridReady(params: any) {
    this.gridApi = params.api;
  }