Angular MatPaginator ne fonctionne pas

Question

J'ai 2 composants. La pagination fonctionne pour un composant mais pas pour l'autre bien que le code soit similaire. Voici mon code html :

<div class="mat-elevation-z8">

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

      <ng-container matColumnDef="col1">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Column1 </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.col1}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="col2">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Column2 </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.col2}} </mat-cell>
      </ng-container>

      <!-- Different columns goes here -->

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

    <mat-paginator #scheduledOrdersPaginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
  </div>

Et ci-dessous est mon code dans component.ts :

dataSource: MatTableDataSource<any>;
displayedColumns = ['col1', 'col2', ... ];
@ViewChild('scheduledOrdersPaginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit(): void {
    // Load data
    this.dataSource = new MatTableDataSource(somearray);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

Un code similaire fonctionne pour l'autre composant et la table est rendue avec la pagination correctement, aucune idée de ce qui ne va pas avec ce code.

Toute aide serait vraiment appréciée.

Answer 1

Dans mon cas, le <mat-paginator> se trouvait à l'intérieur d'un conteneur ayant un élément *ngIf sur celui-ci, qui n'a pas été rendu jusqu'à ce que les données soient chargées de manière asynchrone. Cela provoque this.paginator à être undefined même dans ngAfterViewInit . Cela entraîne un échec silencieux en tant que MatTableDataSource n'a aucun problème à ce que tu mettes paginator à undefined .

La solution consistait à déplacer le <mat-paginator> en dehors de la *ngIf Conteneur d

J'espère que cela aidera quelqu'un qui se trouve dans la même situation que moi.

Answer 2

J'ai résolu un problème similaire en entourant l'instanciation d'un délai d'attente. Essayez ceci :

setTimeout(() => this.dataSource.paginator = this.paginator);

Answer 3

Bien que la réponse choisie fonctionne et résout le problème, il s'agit toujours d'une solution de rechange. Il s'agit d'une façon plus élégante et plus appropriée de traiter le problème.

Essayez d'ajouter AfterViewInit à votre classe, puis mettez this.dataSource.paginator = this.paginator à l'intérieur de ngAfterViewInit() méthode

    ngAfterViewInit() {
        this.dataSource.paginator = this.paginator
    }

alors vous n'auriez pas à appeler la solution de contournement setTimeout .

Answer 4

Immédiatement après avoir défini la source de données, invoquez ChangeDetectorRef.detectChanges() :

// First import ChangeDetectorRef & Material related stuff
import { ..., ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';

// Set properties in your component
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

// Inject in constructor
constructor (..., private cdr: ChangeDetectorRef, ...) { ... }

// Set data source and invoke detectChanges()
this.dataSource = new MatTableDataSource (MY_DATA);
this.cdr.detectChanges();

// after that you can set other properties like
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;

Answer 5

Pour que cela fonctionne, j'ai dû configurer le paginateur après que les données aient été récupérées de la source.

getVariables() {
    this.activeRoute.params.subscribe(params => {
        if (params['id'] && (params['type'] === Type.CodeList)) {
            this.dataService
                .getItems(this.currentLanguage, params['id'])
                .subscribe((items: any) => {
                    this.dataSource.data = this.items;
                    this.dataSource.paginator = this.paginator;
                })
        }
    })
}