更改分页器 pageSize 属性不会刷新 table

Question

我是网络开发新手 (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";

它并不像人们期望的那样工作。它每页更新项目但不更新 mat-table.I 我不确定我遗漏了什么。谁能帮我？我尝试了以下方法：

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

见代码 Stackblitz.

Answer 1

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

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

  _displayRecordCount = '10';

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

Answer 2

只需为下拉菜单更改事件，如下所示。

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

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

检查这个stackblitz

更改分页器 pageSize 属性不会刷新 table

Changing paginator pageSize property doesn't refresh the table

angular-material

angular

mat-table

更改分页器 pageSize 属性 不会刷新 table

Changing paginator pageSize property doesn't refresh the table

angular-material

angular

mat-table

更改分页器 pageSize 属性不会刷新 table