【问题标题】: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();
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-04-19
        • 2018-01-01
        • 2020-04-26
        • 2020-04-23
        • 2018-05-26
        • 1970-01-01
        相关资源
        最近更新 更多