Angular - mat-paginator 没有出现在 mat-table 中答案

【问题标题】：Angular - mat-paginator not appearing for mat-tableAngular - mat-paginator 没有出现在 mat-table 中
【发布时间】：2021-12-25 20:50:21
【问题描述】：

使用 Angular 12，我已经导入了 mat-paginator

import { MatPaginator } from '@angular/material/paginator';

在export我试过了

@ViewChild('paginator') paginator: MatPaginator;

和

@ViewChild(MatPaginator, {read: true}) paginator: MatPaginator;

在component.ts。

在 HTML 中，我有：

<mat-table>
  ...
  <mat-paginator #paginator [pageSizeOptions]="[2, 4, 6, 8, 100]" showFirstLastButtons></mat-paginator>
    
</mat-table>

表格填充（带有非格式化标题）并且分页器不出现。我没有看到任何错误消息。我有点不知所措。

【问题讨论】：

标签： angular angular-material mat-table paginator

【解决方案1】：

根据Mat Table Pagination，mat-paginator元素不在mat-table元素中。

解决方案

您需要将mat-paginator 元素从mat-table 元素中移出。

HTML 模板应如下所示：

<div>
  <mat-table>
    ...
  </mat-table>

  <mat-paginator #paginator [pageSizeOptions]="[2, 4, 6, 8, 100]" showFirstLastButtons></mat-paginator>
</div>

Sample solution on StackBlitz

【讨论】：