带参数的 ag-grid Angular http 请求

Question

我在 a-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”&“start”&“end”&“sort”&“Number”&“DESC”都是参数。

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

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

  this.gridApi = params.api;


  this.gridColumnApi = params.columnApi;

  let URL = 'http://localhost:3000/employees';
  let myHeaders = new Headers();
  myHeaders.set('Content-Type', 'application/json');
  let myParams = new URLSearchParams()
  myParams.set('sort', params.sortModel);
  myParams.set('filter', params.filterModel);
  let options = new RequestOptions({ headers: myHeaders, params: myParams });
  this.http.get(URL, options).subscribe(data => {
    console.log(data);

    var newData = data.json();

    newData.forEach(function (data, index) {
      newData.id = "R" + (index + 1);
    });
    //params.api.setRowData(newData);
    var dataSource = {
      rowCount: null,
      getRows: function (params) {
        console.log("asking for " + params.startRow + " to " + params.endRow);
        setTimeout(function () {

          console.log("sortModel: ", JSON.stringify(params.sortModel));
           console.log("filterModel: ", JSON.stringify(params.filterModel));

          console.log("--------------------------");

          var dataAfterSortingAndFiltering = sortAndFilter(newData, params.sortModel, params.filterModel);
          var rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
          var lastRow = -1;
          if (dataAfterSortingAndFiltering.length <= params.endRow) {
            lastRow = dataAfterSortingAndFiltering.length;
          }
          params.successCallback(rowsThisPage, lastRow);
        }, 500);
      }
    };
    params.api.setDatasource(dataSource);

  });



    /*  this.http
    .get('assets/db.json')
    .subscribe(data => {

      console.log(data);

      var newData = data.json();

      newData.forEach(function (data, index) {
        newData.id = "R" + (index + 1);
      });
      //params.api.setRowData(newData);
      var dataSource = {
        rowCount: null,
        getRows: function (params) {
          console.log("asking for " + params.startRow + " to " + params.endRow);
          setTimeout(function () {

            //var str=JSON.stringify(params.sortModel);
           //console.log("sortModel: ", JSON.stringify(params.sortModel));
            //var try2=params.sortModel;
            //var try3 = try2[0];
            //console.log("try3", try3);
            //console.log("try3.colId",try3.sort);

            //console.log("filterModel: ", JSON.stringify(params.filterModel));
            //console.log(params.filterModel);
            //console.log("--------------------------");

            var dataAfterSortingAndFiltering = sortAndFilter(newData, params.sortModel, params.filterModel);
            var rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
            var lastRow = -1;
            if (dataAfterSortingAndFiltering.length <= params.endRow) {
              lastRow = dataAfterSortingAndFiltering.length;
            }
            params.successCallback(rowsThisPage, lastRow);
          }, 500);
        }
      };
      params.api.setDatasource(dataSource);
    });

*/
  }


}

第一个http.get不能工作（没有错误，可以加载数据，但不能提供排序和过滤），但是第二个，没有参数的可以排序和过滤。我想在开发工具的网络中查看 http.get 请求 url，我现在什么都看不到。有没有人知道如何解决它？谢谢你。我可以在控制台中得到这个结果

enter image description here

Answer 1

它不再调用上面的API。它只是从中切出开始行和结束行。所以实际上 API 将从数据库中获取所有记录，然后对前 100 个进行切片。然后是第二个 100，依此类推。它不像 API 会从 angular 获取参数来获取第一个 100 然后第二个 100 。

Answer 2

你可以使用这样的东西

   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