Pagination Ag网格无限模型分页服务器端

我正在尝试使用服务器端分页的ag网格。我更新了ag网格网站上的代码示例（如下）。我在ngOnInit方法中检索ColumnDef，但遗憾的是，ColumnHeader和rowdata都没有出现。我可以调试到GetRows函数中，并看到行正在返回。记录总数设置正确

如果有人知道为什么网格没有显示列/行，我会非常感激

这是控制台中的输出。 ag-Grid.RowNodeBlockLoader:printCacheStatus:ActivePageLoadScont=0，blocks={“0”：{“blockNumber”：0，“startRow”：0，“endRow”：10，“pageStatus”：“loaded”} ag-Grid.RowNodeBlockLoader:checkBlockToLoad:没有要加载的页面 ag-Grid.InfiniteCache:onPageLoaded:page=0，lastRow=5

但是当调用和集合返回记录总数时

import { Component, OnInit, Input } from '@angular/core';
import {TableMetadata} from "../model/table-metadata";
import { HttpClient } from "@angular/common/http";
import { GridOptions } from "ag-grid";
import { BrxTableService } from '../service/brx-table.service';

@Component({
  selector: 'app-brx-delta-agrid',
  // templateUrl: './brx-delta-agrid.component.html',
  template: `<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [components]="components"
    [floatingFilter]="true"
    [debug]="true"
    [enableServerSideSorting]="true"
    [enableServerSideFilter]="true"
    [enableColResize]="true"
    [rowSelection]="rowSelection"
    [rowDeselection]="true"
    [rowModelType]="rowModelType"
    [paginationPageSize]="paginationPageSize"
    [cacheOverflowSize]="cacheOverflowSize"
    [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
    [infiniteInitialRowCount]="infiniteInitialRowCount"
    [maxBlocksInCache]="maxBlocksInCache"
    [pagination]="true"
    [cacheBlockSize]="cacheBlockSize"
    [getRowNodeId]="getRowNodeId"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
`,
  styleUrls: ['./brx-delta-agrid.component.css'],
  providers: [BrxTableService]
})
export class BrxDeltaAgridComponent implements OnInit{

  public state = {
    skip: 0,
    take: 5
  };


  private columnDefs = [];
  private gridApi;
  private gridColumnApi;

  private components;
  private rowSelection;
  private rowModelType;
  private paginationPageSize;
  private cacheBlockSize;
  private cacheOverflowSize;
  private maxConcurrentDatasourceRequests;
  private infiniteInitialRowCount;
  private maxBlocksInCache;
  private getRowNodeId;


  @Input('tableMetadata') tableMetadata:TableMetadata;

  constructor(private http: HttpClient, private brxTableService:BrxTableService) {

    this.components = {
      loadingRenderer: function(params) {
        if (params.value !== undefined) {
          return params.value;
        } else {
          return '<img src="../assets/loading.gif">';
        }
      }
    };
    this.rowSelection = "multiple";
    this.rowModelType = "infinite";
    this.paginationPageSize = 10;
    this.cacheBlockSize = 10;
    this.cacheOverflowSize = 2;
    this.maxConcurrentDatasourceRequests = 2;
    this.infiniteInitialRowCount = 1;
    this.maxBlocksInCache = 2;
    this.getRowNodeId = function(item) {
      return item.R_ID;
    };
  }

  ngOnInit() {
    this.columnDefs = this.getColumnDefs();

  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get("http://localhost:8080/api/"+ this.tableMetadata.tableName)
      .subscribe(data => {
        data._embedded[this.tableMetadata.tableName +"s"].forEach(function(data, index) {
          data.R_ID = "R" + (index + 1);
        });
        var dataSource = {
          rowCount: null,
          getRows: function(params) {
            console.log("asking ford " + params.startRow + " to " + params.endRow);
            setTimeout(function() {

              let collectionName ='';
              for (var property in data._embedded) {
                if (property.startsWith("BRX")) {
                  collectionName = property;
                }
              }
              var dataAfterSortingAndFiltering = sortAndFilter(data._embedded[collectionName], params.sortModel, params.filterModel);
              var rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
              var lastRow = 5; // data.page.totalElements;
              // if (dataAfterSortingAndFiltering.length <= params.endRow) {
              //   lastRow = dataAfterSortingAndFiltering.length;
              // }
              params.successCallback(rowsThisPage, lastRow);
            }, 500 );
          }
        };
        params.api.setDatasource(dataSource);
      });
  }

  public getColumnDefs() {

    let columnDefs = [];
    for (let i=0; i<this.tableMetadata.columnNames.length; i++) {
      let columnName = this.tableMetadata.columnNames[i];
      let columnDef = {
        headerName: columnName,
        field: columnName,
        width:100
      };

      columnDefs.push(columnDef);
    }

    return columnDefs;
  }
}

function sortAndFilter(allOfTheData, sortModel, filterModel) {
  return sortData(sortModel, filterData(filterModel, allOfTheData));
}
function sortData(sortModel, data) {
  var sortPresent = sortModel && sortModel.length > 0;
  if (!sortPresent) {
    return data;
  }
  var resultOfSort = data.slice();
  resultOfSort.sort(function(a, b) {
    for (var k = 0; k < sortModel.length; k++) {
      var sortColModel = sortModel[k];
      var valueA = a[sortColModel.colId];
      var valueB = b[sortColModel.colId];
      if (valueA == valueB) {
        continue;
      }
      var sortDirection = sortColModel.sort === "asc" ? 1 : -1;
      if (valueA > valueB) {
        return sortDirection;
      } else {
        return sortDirection * -1;
      }
    }
    return 0;
  });
  return resultOfSort;
}
function filterData(filterModel, data) {
  var filterPresent = filterModel && Object.keys(filterModel).length > 0;
  if (!filterPresent) {
    return data;
  }
  var resultOfFilter = [];
  for (var i = 0; i < data.length; i++) {
    var item = data[i];
    if (filterModel.age) {
      var age = item.age;
      var allowedAge = parseInt(filterModel.age.filter);
      if (filterModel.age.type == "equals") {
        if (age !== allowedAge) {
          continue;
        }
      } else if (filterModel.age.type == "lessThan") {
        if (age >= allowedAge) {
          continue;
        }
      } else {
        if (age <= allowedAge) {
          continue;
        }
      }
    }
    if (filterModel.year) {
      if (filterModel.year.values.indexOf(item.year.toString()) < 0) {
        continue;
      }
    }
    if (filterModel.country) {
      if (filterModel.country.values.indexOf(item.country) < 0) {
        continue;
      }
    }
    resultOfFilter.push(item);
  }
  return resultOfFilter;
}

从'@angular/core'导入{Component，OnInit，Input}；
从“./model/TableMetadata”导入{TableMetadata}；
从“@angular/common/http”导入{HttpClient}；
从“ag grid”导入{GridOptions}；
从“../service/brx table.service”导入{BrxTableService}；
@组成部分({
选择器：“应用程序brx delta agrid”，
//templateUrl:'./brx delta agrid.component.html'，
模板：`
`,
样式URL:['./brx delta agrid.component.css']，
提供者：[BrxTableService]
})
导出类brxDeltaGridComponent实现OnInit{
公共国家={
跳过：0，
拍摄时间：5
};
私有columnDefs=[]；
私有网格API；
私有网格API；
私人部门；
私人选择；
私有行模型类型；
私有分页页面大小；
私有缓存块大小；
私有缓存溢出；
私有maxConcurrentDatasourceRequests；
私有无限初始行数；
私有maxBlocksInCache；
私有getRowNodeId；
@输入（'tableMetadata'）tableMetadata:tableMetadata；
构造函数（私有http:HttpClient，私有brxTableService:brxTableService）{
此项。组件={
加载渲染器：函数（参数）{
如果（参数值！==未定义）{
返回参数值；
}否则{
返回“”；
}
}
};
this.rowSelection=“multiple”；
this.rowModelType=“无限”；
this.paginationPageSize=10；
这个.cacheBlockSize=10；
this.cacheOverflowSize=2；
this.maxConcurrentDatasourceRequests=2；
此.InfinitieInitialRowCount=1；
this.maxBlocksInCache=2；
this.getRowNodeId=函数（项）{
返回项目。R\u ID；
};
}
恩戈尼尼特（）{
this.columnDefs=this.getColumnDefs（）；
}
onGridReady（参数）{
this.gridApi=params.api；
this.gridColumnApi=params.columnApi；
这是http
.get（“http://localhost:8080/api/“+this.tableMetadata.tableName）
.订阅（数据=>{
数据._嵌入[this.tableMetadata.tableName+“s”].forEach（函数（数据，索引）{
data.R_ID=“R”+（索引+1）；
});
变量数据源={
行计数：空，
getRows:函数（参数）{
console.log（“询问福特”+params.startRow+”到“+params.endRow”）；
setTimeout（函数（）{
让collectionName=''；
for（数据中的var属性。\u嵌入）{
if（property.startsWith（“BRX”））{
collectionName=属性；
}
}
var dataAfterSortingAndFiltering=sortAndFilter（数据._嵌入[collectionName]，params.sortModel，params.filterModel）；
var rowsThisPage=dataAfterSortingAndFiltering.slice（params.startRow，params.endRow）；
var lastRow=5；//data.page.totalElements；
//if（DataAfterOrtingandFiltering.length值B）{
返回排序方向；
}否则{
返回sortDirection*-1；
}
}
返回0；
});
返回结果排序；
}
函数filterData（filterModel，数据）{
var filterPresent=filterModel&&Object.keys（filterModel）.length>0；
如果（！filterPresent）{
返回数据；
}
var resultOfFilter=[]；
对于（变量i=0；i=允许年龄）{
继续；
}
}否则{
如果（年龄）
大家好，facepalm time…此处的高度设置为100%。该表位于一个重叠中，在渲染时宽度为零，因此行和列标题从未渲染

我仍然无法通过分页获得连续的服务器请求，但至少我可以看到数据：）

希望这个例子能帮助一些人，因为我在网上找不到很多例子

谢谢，
标记。
官方文档令人困惑。正如他们所解释的，它正在调用我们希望在网络选项卡中看到的服务器，因为每次单击下一页时，新请求都会发送到后端。但我想，当我们调用subscribe时，会以不同的方式发生这种情况，然后打开websocket并从后端获取连续数据。您可以看到此请求在“网络”选项卡中使用名称websocket。在客户端启动之前，它将显示待定的响应。请告知我们您的发现
style="width: 100%; height: 100%;"