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

Question

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

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

这是角度代码：

事件详细信息.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);
  }

}

Answer 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>