Question

我有api，我希望每次拨打50条记录。但我想在网格中只显示10乘10。任何建议我怎么能这样做？所以，当我来到最后一页再次致电服务并获得下一个50.任何建议？

<ag-grid-angular [rowSelection]="rowSelection" #agGrid style="display: block;width: 100%; height: 300px;" class="ag-fresh" [gridOptions]="gridoptions"
    [rowData]="data.rowData" [pagination]="true" [suppressPaginationPanel]="true" (rowClicked)='onRowClicked($event)' (selectionChanged)='onSelectionChanged($event)' (gridReady)="onGridReady($event)">
</ag-grid-angular>

public gridoptions: GridOptions = {
        'enableSorting': true,
        'enableFilter': true,
        'suppressRowClickSelection': false,
        'groupSelectsChildren': true,
        'debug': false,
        'rowSelection': 'multiple',
        'rowDeselection': true,
        'enableColResize': true,
        'rowGroupPanelShow': 'always',
        'pivotPanelShow': 'always',
        'enableRangeSelection': true,
        'animateRows': true,
        'paginationAutoPageSize': false,
        'paginationPageSize' : 11,
        'columnDefs': [],
        'pagination': false,
        'defaultColDef': {
            'editable': true,
            'enableRowGroup': true,
            'enablePivot': true,
            'enableValue': true
        },

Answer 1

好的，没关系我的评论。我会给你一个完整的答案。因此，您要做的是在应用中的某个位置手动保留并更新rowData。在组件初始化时，您必须获取第一个数据块。因此，您可以在ngOnInit() {...}中将调用简单地调用到httpClient（或者在使用Redux时触发它的操作）。

然后你必须对浏览页面的用户作出反应，并在他到达最后一页时再次更新rowData（再次，通过调用httpClient）。

所以在你的gridOptions中定义：

paginationChanged(event: PaginationChangedEvent) => {
    if (event.newPage) {
        const currentPage: number = gridOptions.api.paginationGetCurrentPage();
        if (this.data.rowData.length <= (currentPage * 10)) {
            // fetch again
        }
    }
}

确保更新整个data对象，而不是仅仅将新项目推送到rowData - 数组以触发更改检测：

rowData = [...oldRowData, ...newChunk];

Answer 2

我希望我在angular中能为您提供帮助，您可以在.html中添加K和O(N)

[pagination]="true

客户端对ag网格的分页？

2 个答案: