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

【问题标题】：sending multiple requests when using ag-grid and angular 2使用 ag-grid 和 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);
  }

}

【问题讨论】：

标签： angular asp.net-web-api2 ag-grid

【解决方案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>

【讨论】：