Paginador de material angular

Solución:

Supongamos que ha cargado los datos de respuesta (Array) en las solicitudes.

Probablemente pueda crear un método que devuelva un conjunto de datos de la propiedad de las solicitudes utilizando el método de empalme.

Por lo tanto, en los resultados de la suscripción a la API, se puede manejar así por primera vez:

this.request_service.get_requests()
  .subscribe((res) => {
    this.pageLength = res['requests'].length;
    this.splicedData = res['requests'].slice(((0 + 1) - 1) * this.pageSize).slice(0, this.pageSize);
  });

dónde pageSize, se ha definido anteriormente en un valor predeterminado.

Entonces, cada vez que el usuario cambia el mat-paginator componente en la plantilla, el pageChangeEvent se ejecuta. La plantilla se ve así:

  <mat-paginator (page)="pageChangeEvent($event)" [length]="pageLength" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">
  </mat-paginator>

Entonces su método de componente correspondiente es este.

 pageChangeEvent(event) {
    const offset = ((event.pageIndex + 1) - 1) * event.pageSize;
    this.splicedData = this.requests.slice(offset).slice(0, event.pageSize);
  }

Finalmente, tu *ngFor puede usar el splicedData matriz para poblar sí mismo.

<mat-card *ngFor="let request of splicedData">
    <mat-card-title> {{ request.title }}</mat-card-title>
</mat-card>

Podrías usar el mat-table, se integra muy bien con el mat-paginator. Ocultar el encabezado y cambiar el estilo para que se vea como desea.

El componente :

displayedColumns: string[] = ['requests'];
dataSource: MatTableDataSource<{request: number}>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

constructor() {
 this.dataSource = new MatTableDataSource(values);
}

ngOnInit() {
 this.dataSource.paginator = this.paginator;
 this.dataSource.sort = this.sort;
}

La plantilla :

<table mat-table [dataSource]="dataSource" matSort>

 <!-- Requests Column -->
   <ng-container matColumnDef="requests">
     <th mat-header-cell *matHeaderCellDef mat-sort-header/>
     <td mat-cell *matCellDef="let row"> {{row.request.title}} </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="displayedColumns"/>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;">
   </tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"/>

A continuación se muestra un ejemplo de ejecución.

---

---

Utiliza Nuestro Buscador