ag-grid带有参数的Angular http请求

时间:2018-03-21 19:38:59

标签: angular http observable http-get ag-grid

我在网格中使用Infinity滚动模型,现在我想发送带有几个参数的http get请求,如下所示 https://tryoper/_dc=1521659863545&page=1&start=0&end=50&sort=%5B%7B%22property%22%3A%22Number%22%2C%22direction%22%3A%22DESC%22%7D%5D

“page”& “开始”和“结束”和“排序”&“数字”和“DESC”都是参数。

我的http请求代码如下,我使用json占位符来运行json文件作为服务器

boolean

第一个http.get无法正常工作(没有错误,可以加载数据,但不能提供排序和过滤),但第二个,一个没有参数可以排序和过滤。我想在开发工具的网络中看到http.get请求url,我现在看不到任何东西。有没有人知道如何解决它?谢谢。我可以在控制台中获得此结果

enter image description here

2 个答案:

答案 0 :(得分:1)

它不会再次调用上述API。它只是从中切出起始行和结束行。因此,实际上API将从数据库获取所有记录,然后对前100个进行切片。然后对100个进行切片,依此类推。并不是说API会从angular那里获取param来获取前100个,然后再获取100个。

答案 1 :(得分:0)

您可以使用类似

   dataSource: IDatasource = {
getRows: (params: IGetRowsParams) => {
  this.apiService().subscribe(data => {
    this.rowData = data;

    params.successCallback(data, 1000
    );
  })
}

}

apiService(): any {
     return this.http.get<any>('your Get request Url with the parameters example param.startRow , param.endRow')

}

 onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.gridColumnApi.rowHeight = 50;
this.gridApi.sizeColumnsToFit();
this.gridApi.setDatasource(this.dataSource)

this.autoSizeAll();

}

和HTMl端

<ag-grid-angular rowHeight="40" style="width: 100%; height: 510px; margin: 20px" class="ag-theme-balham" [rowData]="rowData"
            class="ag-theme-balham" [columnDefs]="columnDefs" [pagination]="true"  [floatingFilter]="true" [debug]="true" [enableServerSideSorting]="true" [enableServerSideFilter]="true" [enableColResize]="true"
            [rowSelection]="rowSelection" [rowDeselection]="true" [rowModelType]="rowModelType" [paginationPageSize]="paginationPageSize" 
            [cacheOverflowSize]="cacheOverflowSize" [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests" [infiniteInitialRowCount]="infiniteInitialRowCount"
           (rowClicked)="onRowClicked($event)"  [maxBlocksInCache]="maxBlocksInCache" [getRowNodeId]="getRowNodeId" [components]="components" (gridReady)="onGridReady($event)"  [enableColResize]="true">
        </ag-grid-angular>



enter code here