Блог

Я новичок в веб-разработке (угловой). Я пытаюсь привязать 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>
 

тс:

 displayRecordCount="10";
 

Это работает не так, как можно было бы ожидать. Он обновляет элемент на странице, но не обновляет таблицу мата.Я не уверен, чего мне не хватает. Кто-нибудь может мне помочь? Я попробовал следующее:

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

Смотрите код в
Stackblitz.

Просто выберите событие изменения для выпадающего списка, как показано ниже.

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

И больше не требуется привязывать value to displayRecordCount variable .

Проверьте этот стекблитц

Очевидно, что пагинатор не заставляет источник данных обновляться, просто изменяя его pageSize свойство, и paginator._changePageSize требуется вызов. Вероятно, вы делаете это не в том месте.

Добавьте установщик в свою декларацию свойств, чтобы вручную запустить обновление, таким образом:

   _displayRecordCount = '10';

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