Не могу заставить работать mat-paginator, загружены все данные

Question

У меня есть таблица, и я пытаюсь добавить нумерацию страниц с помощью mat-paginator и инструкций из документации Angular, но он продолжает загружать всю таблицу на первой странице

Я пытался

setTimeout(() => this.tableDataSource.paginator = this.paginator);

и

ngAfterViewInit() {
    this.tableDataSource.paginator = this.paginator;
}

Вот мой компонент

[...]
displayedColumns: string[] = ['BookTitulo', 'BookAutor', 'BookGenero'];
  data: Book[];
  tableDataSource = new MatTableDataSource<Book>(this.data);
  isLoadingResults = true;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private api: ApiService) { }

  ngOnInit() {
    this.api.getBooks()
      .subscribe(res => {
        this.data = res;
        console.log(this.data);
        this.tableDataSource = new MatTableDataSource<Book>(this.data);
        this.isLoadingResults = false;
      }, err => {
        console.log(err);
        this.isLoadingResults = false;
      });

  }
[...]

и вот мой стол

[...]
<table mat-table [dataSource]="tableDataSource" class="example-table"
           matSort matSortActive="BookTitulo" matSortDisableClear matSortDirection="asc">


      <!-- Book Name Column -->
      <ng-container matColumnDef="BookTitulo">
        <th mat-header-cell *matHeaderCellDef>Titulo</th>
        <td mat-cell *matCellDef="let row">{{row.BookTitulo}}</td>
      </ng-container>

      <!-- Book Price Column -->
      <ng-container matColumnDef="BookAutor">
        <th mat-header-cell *matHeaderCellDef>Autor</th>
        <td mat-cell *matCellDef="let row">{{row.BookAutor}}</td>
      </ng-container>

      <!-- Book Price Column -->
      <ng-container matColumnDef="BookGenero">
        <th mat-header-cell *matHeaderCellDef>Genero</th>
        <td mat-cell *matCellDef="let row">{{row.BookGenero}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/book-details/', row._id]"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[2, 3, 5]" showFirstLastButtons></mat-paginator>
[...]

Я пробовал то, что говорит другой пост, но ничего не работает, пожалуйста, помогите и спасибо за чтение.

Answer 1

Обычно вы не можете добавить свой paginator ngAfterViewInit, потому что mat-table уже вызвал метод connect(). Попробуйте в ngOnInit, если ваш пагинатор не динамический (не зависит от *ngIf.
Привет