重置分页器首页角度材料答案

【问题标题】：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

但它不起作用。

【问题讨论】：

标签： angular pagination angular-material angular7

【解决方案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();

【讨论】：