更改分页器 pageSize 属性不会刷新表格答案

【问题标题】：Changing paginator pageSize property doesn't refresh the table更改分页器 pageSize 属性不会刷新表格
【发布时间】：2021-09-23 01:58:21
【问题描述】：

我是 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.

【问题讨论】：

我会将问题标题更改为Changing paginator pageSize property doesn't refresh the table

标签： angular angular-material mat-table

【解决方案1】：

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

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

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

查看此stackblitz

【讨论】：

【解决方案2】：

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

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

  _displayRecordCount = '10';

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

【讨论】：

它对我不起作用。不知道为什么。可能是因为我的分页器是在ngOnInit 中定义的，就像这样setTimeout(() => this.dataSource.sort = this.sort);
如果您在 stackblitz 中进行此更改，它会起作用。不知道你的实际代码看起来如何。