Angular

Question

使用 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>

table 填充（使用 non-formatted header）并且分页器不出现。我没有看到任何错误消息。我有点不知所措。

Answer 1

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

解决方案

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

HTML 模板应如下所示：

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

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

Sample solution on StackBlitz

Angular - mat-paginator 未出现 mat-table

Angular - mat-paginator not appearing for mat-table

paginator

angular-material

mat-table

解决方案