更新pageIndex時，Angular 5 Material Paginator重置為負值

Question

我正在使用Angular Material數據表來顯示可添加到的對象列表。 將對象添加到數據源時，頁面索引會中斷並顯示負數。 我發現修復此問題的唯一方法是將材質分頁器的頁面索引重置為0.但是，對分頁器的任何進一步更改都會導致pageIndex為-1或破壞的分頁符。 這是一個例子：

我首先在Angular Material數據源中設置新數據，如下所示：

private refreshTable() {
    // first we update the length of the paginator with the new length of the datasource data to ensure parity
    this.paginator.length = this.dataSource.data.length;


    // next we get the current page number so we can return to it later.
    let currentPage = this.paginator.pageIndex;

    this.tempSubscription2 = this.rrService.getSearchResults(this.searchEnv.outputPayload(true, true)).subscribe(
        (data: any) => {
            this.extractSBRs(data);
            this.dataSource.data = [];
            // Here is where the dataSource is reset...
            this.dataSource.data = this.sbrs;

            this.paginator.length = this.dataSource.data.length;
            this.paginator.pageIndex = 0;
            this.dataSource.paginator = this.paginator;
            console.log('made it this far');

            if (this.dataSource.paginator.pageIndex < currentPage) {
                console.log('need to return to the current page');
                this.paginator.pageIndex = currentPage;
                this.paginator._pageIndex = currentPage;
                this.dataSource.paginator.pageIndex = currentPage;
                this.dataSource.paginator._pageIndex = currentPage;

            }
        },
        (err: any) => {
        },
        () => {
        }
    );
}

當運行此代碼時，第一頁的更新很好，因為this.paginator.pageIndex被設置為0.一旦在大於零的頁面上添加元素，表格顯示第一頁，該分頁器有一個pageIndex為-1，UI中的paginator如下所示：

注意負指數-9 - 0 。 似乎很少有更新Angular材料數據表的示例，甚至更少有關於如何更新它們影響Angular Material分頁器的進一步說明。 如何讓paginator轉到0以外的pageIndex而不會出現負面索引問題？

我已經嘗試更新this.paginator ，它是根據這里的建議通過ViewChild()的。 我也嘗試更新dataSource.paginator ，你可以在上面的代碼中看到。

這是我的進口：

import {
AfterContentInit, AfterViewInit, ApplicationRef, ChangeDetectorRef, 
Component, OnDestroy, OnInit,
    ViewChild
} from '@angular/core';
import { SearchEnvironment } from "../classes/search-environment";
import { SearchFilterDropdown } from "../classes/search-filter-dropdown";
import { ActivatedRoute, Router } from "@angular/router";
import {MatTableDataSource, MatPaginator, MatDialog, MatTable, MatSnackBar} from "@angular/material";
import { RemoteRetrievalService } from "../core/services/remote-retrieval.service";
import { Observable } from "rxjs/Observable";

如何在不導致paginator.pageIndex值中的負索引或項目范圍中負值的錯誤用戶體驗的情況下獲得返回到currentPage索引的所需分頁符行為？

Answer 1

他們如何構建這些組件是很奇怪的。 我不確定我的解決方案是否有效，但根據我在該問題中所閱讀的內容，它們似乎無法在同一摘要周期中處理length更改和pageIndex更改。

所以我建議先改變length ，然后再改變pageIndex 。

 this.paginator.length = this.dataSource.data.length;
 this.paginator.pageIndex = 0;
 this.dataSource.paginator = this.paginator;
 console.log('made it this far');

上面設置了我們知道將在組件上工作的值，下一部分使用window.setTimeout在組件有機會更新自身后運行下一組更改。

 if (this.dataSource.paginator.pageIndex < currentPage) {
     window.setTimeout(()=>{
         this.zone.run(()=>{
            console.log('need to return to the current page');
            this.paginator.pageIndex = currentPage;
            this.paginator._pageIndex = currentPage;
            this.dataSource.paginator.pageIndex = currentPage;
            this.dataSource.paginator._pageIndex = currentPage;
            // EDIT: You must then set the datasource paginator back to the newly edited paginator. 
            this.dataSource.paginator = this.paginator;
         });
     });
 }

您需要注入NgZone來運行Angular區域內的代碼（用於錯誤處理）。 使用window.setTimeout時這是一個很好的做法。

請記住，Angular Universal中不存在window ，您希望稍后進行服務器端渲染，但這是一個不同的問題。