代码之家 › 专栏 › 技术社区 › Knight

更新页面索引时,Angular 5 Material Paginator重置为负值

angular-material2 pagination angular

Knight · 技术社区 · 7 年前

我使用一个角度材质数据表来显示可以添加到的对象列表。将对象添加到数据源时,页面索引会中断并显示负数。我发现解决这个问题的唯一方法是将material paginator的页面索引重置为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中的分页器如下所示:

注意负指数 -9 - 0 。更新角材料数据表的示例似乎很少,关于更新它们如何影响角材料分页器的进一步说明更少。如何让分页器转到0以外的页面索引,而不出现负索引问题?

我试着只更新 this.paginator 这是通过 ViewChild() 根据建议 here .我也尝试过更新 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";

如何获得所需的分页器行为,即返回到currentPage索引,而不会在 paginator.pageIndex 值还是项目范围内负值的不良用户体验?

1 回复 | 直到 7 年前

Knight 7 年前

奇怪的是,他们是如何构建这些组件的。我不确定我的解决方案是否有效,但根据我在这篇文章中读到的内容,他们似乎无法同时处理这两个问题 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 在Angular Universal中不存在,以防以后需要进行服务器端渲染,但这是另一个问题。