Construí un componente que es una tabla basada en tarjetas. tiene una entrada llamada: @Input() tableModelRows!: Object[]; que recibe una matriz de objetos. los elementos de esta matriz se consideran filas de la tabla y cada uno de ellos se importa a un componente basado en tarjeta: <app-card-based-table-rows> usando *ngFor para mostrarlos en filas. entonces, debido a la gran cantidad de filas (elementos de la matriz), quiero utilizar mat-paginator para mostrarlas en varias páginas. ¿Cómo se puede usar el mat-paginator para este propósito? En realidad, ¿cómo paginar los componentes <app-card-based-table-rows> (componentes secundarios)? El contenido de los archivos .ts y .HTML del componente de tabla basada en tarjeta (componente principal) es el siguiente:
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>Un mat-paginator se puede utilizar "independiente". Solo necesita "alimentar" con las opciones pageIndex (índice basado en 0), tamaño de página, longitud y tamaño de página.
<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; Consulte la variable de referencia de la plantilla #paginator . Entonces puede usar directamente en su .html usando slice pipe
<ng-content *ngFor="let item of myArray|slice: (paginator.pageIndex*paginator.pageSize): ((paginator.pageIndex+1)*paginator.pageSize)> ... </ng-content>Si necesita más control, también puede agregar el evento (página) para controlar sus elementos
<mat-paginator #paginator ... (page)="changePage($event) > </mat-paginator> changePage(event:PageEvent){ console.log("you're in page index",event.pageIndex) ..make something more... }O obtenga el paginador usando ViewChild
@ViewChild(MatPaginator,{static:true}) paginator:MatPaginator