1

我正在使用以下版本。

角 CLI：10.0.1

节点：12.18.2

操作系统：win32 x64

角度：10.0.2

@ag-grid-community/angular@23.2.1

@ag-grid-community/all-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;
      }
    );
  }
}

当我在 chrome 开发人员工具上看到“网络”选项卡时，服务会很好地返回结果。

问题在：

if(!this.gridOptions.api){
          return;
}

基本上，在 ngOnInit() 中，我正在初始化 gridOptions (GridOptions)；但我的数据稍后会被提取（基于一些检查和用户输入）。

因此，当我尝试使用 setRowData 时，由于 this.gridOptions.api 未定义而失败。

我该如何解决这个问题？

4

3 回答 3

0

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

您必须使用 onGridReady(params) 方法。您可以从 params.api 等参数中获取 gridApi

于 2020-08-03T02:12:45.003 回答
0

您必须按以下方式使用它。当网格完成创建时，它会引发一个准备就绪的事件。该事件执行分配给该事件的函数，如以下代码所示。根据Grid Event文档页面，AgGridEvent 有两个属性，api 和 columnApi。因此，您可以通过引发事件的参数获取此属性，例如 params.api。您可以将其分配给您想要的任何内容。需要 Api 属性来创建、更新、检索网格中的行。

─ 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;
  }
于 2020-11-07T20:42:26.720 回答
-1

实际上，如果您仍然有问题，您应该将代码粘贴到您调用handleUserSelection方法的位置。

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

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

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

于 2020-07-29T08:41:55.807 回答