如何使用 mat-paginator 将基于卡片的自定义组件分页到父组件视图中？

Question

我构建了一个基于卡片的表格组件。 它有一个名为： @Input() tableModelRows:; Object[];的输入。 @Input() tableModelRows:; Object[]; 接收对象数组。 该数组的元素被视为表格的行，并且每个元素都被导入到基于卡片的组件中： <app-card-based-table-rows>使用 *ngFor 将它们显示在行中。 所以，由于大量的行（数组的元素），我想利用 mat-paginator 在几个页面中显示它们。 如何为此目的使用 mat-paginator？ 实际上，如何分页<app-card-based-table-rows>组件（子组件）？ card-based-table组件（父组件）的.ts和.HTML文件内容如下：

 import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-card-based-table', templateUrl: './card-based-table.component.html', styleUrls: ['./card-based-table.component.css'] }) export class CardBasedTableComponent implements OnInit { @Input() tableHeaderTitles:; string[]: @Input() tableModelRows;. Object[]. //.:. constructor() {} ngOnInit(): void { } }

 <!-- insert table header selector--> <app-card-based-table-header [headerTitles]="tableHeaderTitles"> </app-card-based-table-header> <!-- insert table body selector--> <app-card-based-table-rows *ngFor="let row of tableModelRows" [rowTitles]="row"> </app-card-based-table-rows>

Answer 1

mat-paginator 可以“独立”使用。 您只需要带有 pageIndex（基于 0 的索引）、pageSize、length 和 pageSize 选项的“feed”。

<mat-paginator #paginator [length]="length"
              [pageIndex]="pageIndex"
              [pageSize]="pageSize"
              [pageSizeOptions]="[5, 10, 25, 100]"
              (page)="changePage($event)
              >
</mat-paginator>

length=100;
pageIndex=0;
pageSize=10;

请参阅模板引用变量#paginator 。 所以你可以直接在你的.html中使用切片pipe

<ng-content *ngFor="let item of myArray|slice:
             (paginator.pageIndex*paginator.pageSize):
             ((paginator.pageIndex+1)*paginator.pageSize)>
...
</ng-content>

如果您需要更多控制，您还可以添加事件（页面）来控制您的项目

<mat-paginator #paginator
               ...
              (page)="changePage($event)
              >
</mat-paginator>

changePage(event:PageEvent){
   console.log("you're in page index",event.pageIndex)
   ..make something more...
}

或者使用 ViewChild 获取分页器

@ViewChild(MatPaginator,{static:true}) paginator:MatPaginator