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

Question

我是网络开发(Angular)的新手。我正在尝试使用以下命令将 mat-select 显示记录选项与 mat-paginator 绑定(bind):

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>

并且不再需要将值绑定(bind)到displayRecordCount变量。

看看这个 stackblitz