angular - 更改分页器 pageSize 属性不会刷新表格

Question

我是 Web 开发（Angular）的新手。我正在尝试将mat-select显示记录选项与mat-paginator以下内容绑定：

HTML：

 <div class="col">
    <span class="">Display</span>
    <mat-form-field id="display-record-count" appearance="outline" class="mx-2">
      <mat-select [(value)]="displayRecordCount">
        <mat-option value="5">5</mat-option>
        <mat-option value="10">10</mat-option>
        <mat-option value="20">20</mat-option>
      </mat-select>
    </mat-form-field>
    <span class="">records</span>
  </div>


<mat-paginator #paginator [pageSize]="displayRecordCount" [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>

TS：

displayRecordCount="10";

它不像人们期望的那样工作。它更新每页的项目，但不更新垫表。我不确定我错过了什么。谁能帮我？我尝试了以下方法：

 this.dataSource.paginator._changePageSize(+this.displayRecordCount);

请参阅Stackblitz中的代码 。

Answer 1

只需将更改事件用于下拉列表，如下所示。

<mat-select (selectionChange)="this.paginator._changePageSize($event.value)">
...
</mat-select>

并且不再需要绑定value to displayRecordCount variable。

看看这个堆栈闪电战

Answer 2

显然分页器不会仅通过更改其pageSize属性来导致数据源刷新，并且需要调用paginator._changePageSize。你可能在错误的地方做这件事。

在您的属性声明中添加一个 setter 以手动触发刷新，因此：

  _displayRecordCount = '10';

  get displayRecordCount() {
    return this._displayRecordCount;
  }
  set displayRecordCount(value) {
    this._displayRecordCount = value;
    this.paginator._changePageSize(+value);
  }