重置分页器第一页角材料

MGs*_*MGs 14 pagination angular-material angular angular7

我试图转到mat-paginator的第一页,即重置分页,但不起作用。知道如何解决吗?

我的 html 是这样的

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

打字稿:

   getPublicationFollowersData(event?: PageEvent) {
      this.getPublicationsUser(event.pageIndex);
}
Run Code Online (Sandbox Code Playgroud)

我尝试使用以下方法初始化页面:

this.page = 1
Run Code Online (Sandbox Code Playgroud)

但它不起作用。

Str*_*erk 22

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

@ViewChild() paginator: MatPaginator;
...
this.paginator.pageIndex = 0;
Run Code Online (Sandbox Code Playgroud)

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


小智 8

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


Roh*_*noy 6

为材料角度分页器以及数据源创建参考

dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;
Run Code Online (Sandbox Code Playgroud)

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

this.dataSource.paginator = this.paginator;
Run Code Online (Sandbox Code Playgroud)

也可以通过调用分页器的第一页方法重置

this.paginator.firstPage();
Run Code Online (Sandbox Code Playgroud)