重置分页器首页角度材料

Posted 2023-03-10

【中文标题】重置分页器首页角度材料

【英文标题】：reset paginator first page angular material

【发布时间】：2019-06-20 20:44:45

【问题描述】：

我正在尝试去mat-paginator的第一页，也就是重置分页，但是还是不行。知道如何解决吗？

我的html是这样的

<mat-paginator [length]="itemTotal" [pageIndex]="page" [pageSize]="itemPage" (page)="pageEvent = getPublicationFollowersData($event)">
    </mat-paginator>

打字稿：

   getPublicationFollowersData(event?: PageEvent) 
      this.getPublicationsUser(event.pageIndex);

我尝试使用以下命令初始化页面：

this.page = 1

但它不起作用。

【参考方案1】：

如果使用

@ViewChild(MatPaginator,  static : true ) paginator: MatPaginator;

应该是

@ViewChild(MatPaginator,  static : false ) paginator: MatPaginator;

如果 static:true 则分页器对象未定义。

【讨论】：

我有未定义的错误 static : false :(

这取决于它所写的模板，并且在最新版本的 angular 中不需要

【参考方案2】：

您需要使用ViewChild 装饰器来选择分页器，然后设置分页器的pageIndex 属性。

@ViewChild() paginator: MatPaginator;
...
this.paginator.pageIndex = 0;

编辑：根据其他答案的建议，如果您想将分页器重置为第一页，最好使用this.paginator.firstPage()

【讨论】：

它对我不起作用，我有一个错误：TypeError: Cannot set property 'pageIndex' of undefined

this.paginator.firstPage() 如果您想明确表达，也可以使用。

【参考方案3】：

为材料角度分页器和数据源创建一个参考

dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;

您想使用以下代码重置分页器

this.dataSource.paginator = this.paginator;

也可以通过调用分页器的首页方法进行重置

this.paginator.firstPage();

【参考方案4】：

<mat-paginator #paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = paginationClicked($event)">
</mat-paginator>
@ViewChild('paginator') paginator: MatPaginator;
this.paginator.firstPage();