Angular Can'；t使mat paginator工作，加载整个数据

我有一个表格，我试图用mat paginator和Angle文档中的说明添加分页，但它一直在第一页加载整个表格

我试过了

setTimeout(() => 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;
      });

  }
[...]

[…]
displayedColumns:string[]=['BookTitolo'，'BookAutor'，'BookGenero']；
数据：书籍[]；
tableDataSource=新MatTableDataSource（this.data）；
isLoadingResults=真；
@ViewChild（MatPaginator）分页器：MatPaginator；
构造函数（私有api:ApiService）{}
恩戈尼尼特（）{
this.api.getBooks（）
.订阅（res=>{
这个数据=res；
console.log（this.data）；
this.tableDataSource=新MatTableDataSource（this.data）；
this.isLoadingResults=false；
}，err=>{
控制台日志（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>
[...]

[…]
提特罗
{{row.booktutolo}}
自动
{{row.bookator}}
慷慨的
{{row.bookrono}}
[...]

---

我尝试过其他帖子所说的内容，但没有效果，请帮助并感谢阅读。

您通常无法添加

分页器
ngAfterViewInit
，因为
mat table
已经调用了
connect（）
方法。如果分页器不是动态的（不受
*ngIf


问候语
您通常无法在ViewInit
之后添加
分页器
，因为
mat表
已经调用了
connect（）
方法。如果分页器不是动态的（不受
*ngIf影响），请尝试使用
ngonit
您好
您可以在上创建演示代码吗？我将尝试从中选择。您可以在上创建演示代码吗？我将尝试从中选择。
[...]
<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>
[...]