使用 ag-grid 和 angular 2 时发送多个请求

Posted 2023-03-28

【中文标题】使用 ag-grid 和 angular 2 时发送多个请求

【英文标题】：sending multiple requests when using ag-grid and angular 2

【发布时间】：2017-12-03 15:25:27

【问题描述】：

我正在从 ASP.NET Webapi 检索数据并在 Angular 2 应用程序中填充 ag-grid。

数据在 ag-grid 中填充，但我注意到开发人员工具的网络选项卡中的请求被请求淹没并最终超时。我不确定为什么会这样。似乎 web api 被无限调用。

这是角码：

event-details.component.ts

import  IEvent  from 'model/event.model';
import  EventService  from 'services/event.service';
import  Component, OnInit  from '@angular/core';
import GridOptions from "ag-grid/main";

@Component(
  selector: 'event-details',
  templateUrl: './event-details.component.html',
  styleUrls: ['./event-details.component.css']
 )
export class EventDetailsComponent implements OnInit 
events: IEvent[];
gridOptions: any = [];
errorMessage: string;
error: any;

constructor(private eventService: EventService) 
  this.gridOptions = <GridOptions>;


columnDefs() 
return [
    headerName: "Event ID", field: "id", width: 100,
    headerName: "Event Name", field: "name", width: 100,
    headerName: "Event Date", field: "date", width: 100,
    headerName: "Event Time", field: "time", width: 100,
    headerName: "Event Price", field: "price", width: 100
  ]


ngOnInit() 
  this.eventService.getEvents().subscribe(
    events =>  
      this.events = events, 

    this.gridOptions = 
        rowData: this.events,
        columnDefs: this.columnDefs()
      ;
    ,
    error => this.errorMessage = <any>error);


onGridReady(params) 
    params.api.sizeColumnsToFit();

这里是 event.service.ts 的代码：

import  Injectable  from "@angular/core";
import  Observable from "rxjs/Rx";
import  Http  from "@angular/http";
import  IEvent  from 'model/event.model';
import 'rxjs/Rx';

@Injectable()
export class EventService 

  constructor(private http: Http) 

  getEvents(): Observable<IEvent[]> 
    return this.http.get("/api/events")
        .map((response: any) => 
            return response.json();
        )
        .do(data => console.log(JSON.stringify(data)))
        .catch(this.handleError);
   ;

  private handleError (error: any) 
    let errMsg = (error.message) ? error.message :
        error.status ? `$error.status - $error.statusText` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  

【参考方案1】：

rds80！之前有过这样的问题，并通过 ag-grid 表的以下属性解决了这个问题： [blockLoadDebounceMillis]="50"（选择你自己的去抖时间）和[maxConcurrentDataSourceRequests]="1"

我的最终配置：

<ag-grid-angular
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [frameworkComponents]="components"
  [headerHeight]="headerHeight"
  [rowHeight]="69"
  rowModelType="infinite"
  [paginationPageSize]="20"
  [cacheBlockSize]="pageSize"
  (gridReady)="onGridReady($event)"
  rowSelection="single"
  (cellClicked)="onCellClicked($event)"
  [rowClassRules]="rowClassRules"
  [enableBrowserTooltips]="true"
  [tooltipShowDelay]="0"
  [blockLoadDebounceMillis]="50"
  [maxConcurrentDatasourceRequests]="1"
  [maxBlocksInCache]="1"
></ag-grid-angular>