无法使 mat-paginator 工作，已加载整个数据答案

【问题标题】：Can't make mat-paginator work, entire data is loaded无法使 mat-paginator 工作，已加载整个数据
【发布时间】：2019-10-23 20:00:33
【问题描述】：

我有一个表格，我正在尝试使用 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>
[...]

我已经尝试了其他帖子所说的但没有任何效果，请帮助并感谢您的阅读。

【问题讨论】：

你能在stackblitz.com上创建一个演示代码吗？我会尝试从那里挑选。

标签： angular typescript angular7 mat-table

【解决方案1】：

你通常不能添加你的paginatorngAfterViewInit，因为mat-table已经调用了connect()方法。如果您的分页器不是动态的（不受*ngIf 影响，请尝试使用ngOnInit。
问候

【讨论】：