angular - 为什么在代码更改后分页器页面索引不会更改？

Question

嘿，我有分页器:

                   <md-paginator [length]="length"
                                  [pageSize]="pageSize"
                                  [pageSizeOptions]="pageSizeOptions"
                                  (page)="pageEvent = $event">
                    </md-paginator>

Paginator 只能使用 UI 按钮工作，但如果不在代码中重新加载页面，我无法更改页面的索引。以下均无效(mdPaginator 在构造函数中):

this.pageIndex = 0;
this.mdPaginator.pageIndex = 0;
this.mdPaginator.previousPage();

顺便说一下，我在 *ngFor 循环中使用分页器，而不是表格。

Answer 1

您使用的不是最新的 Material 2 版本。

如果您使用的版本低于 2.0.0-beta.10，则为 bug .所以至少更新到那个。

那么，这应该可行:

import { Component, ViewChild } from '@angular/core';
import { MdPaginator } from '@angular/material';

@Component({
  selector: 'my-component',
})
export class MyComponent {
  @ViewChild('paginator1') paginator1: MdPaginator;

  myFunction() {
    this.paginator1.pageIndex = 0;
  }

}

<md-paginator #paginator1
    [length]="100"
    [pageSize]="10"
    [pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>

<button md-button (click)="myFunction()">Paginate</button>

在最新的 Material 版本中，将 MdPaginator 替换为 MatPaginator 并将所有 HTML md- 替换为 mat-