web-dev-qa-db-fra.com

MatPaginator angulaire ne fonctionne pas

J'ai 2 composants. Les deux ont mat-table et paginators et la pagination fonctionne pour un composant et ne fonctionne pas pour l'autre composant bien que le code soit similaire. Ci-dessous mon 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 composant.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, aucun indice sur ce qui ne va pas avec ce code.

Toute aide sera grandement appréciée

angularpaginationangular-material
10
Nagendra Varma

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

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

Dans mon cas, l'élément <mat-paginator> était à l'intérieur d'un conteneur contenant un *ngIf, qui ne restituait pas jusqu'à ce que les données soient chargées de façon asynchrone. Cela provoque this.paginator à être undefined même dans ngAfterViewInit. Cela provoque une défaillance silencieuse, car MatTableDataSource n'a pas de problème à définir paginator sur undefined.

La solution consistait à déplacer le <mat-paginator> en dehors du conteneur *ngIf 'd

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

12
Skylar Brown

Bien que la réponse sélectionnée fonctionne et résolve le problème, il s'agit toujours d'une solution de contournement. C'est une manière plus appropriée et plus élégante de traiter le problème.

Essayez d’ajouter une interface AfterViewInit à votre classe, puis mettez this.dataSource.paginator = this.paginator dans la méthode ngAfterViewInit()

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

dans ce cas, vous n’auriez pas à appeler la solution de contournement setTimeout.

7
hopsey

Pour que cela fonctionne, je devais définir la pagination une fois les données extraites 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;
                })
        }
    })
}
1
Hasse
  <mat-paginator
        #scheduledOrdersPaginator
          (page)="pageEvent($event)">
        </mat-paginator>
         pageEvent(event){
         //it will run everytime you change paginator
           this.dataSource.paginator = this.paginator;
          }
0
Muhammad Shaheem

L'utilisation de setTimeOut () résoudra le problème temporairement. Toutefois, cela ne fonctionnera pas à nouveau si vous chargez un nombre considérable de données [disons 1000 lignes] dans MatDataSource.

nous avons constaté que MatTable se chargeait très lentement si un jeu de données volumineux était défini avant le paramétrage de la pagination de la source de données.

ngOninit(){
// initialize dataSource here
}
    ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;

  /* now it's okay to set large data source... */
  this.dataSource.data = [GetLargeDataSet];}

Donc, initialisez la source de données en premier lieu et définissez les propriétés telles que "Paginator" ou "Sort" avant de transférer les données dans la source dans la propriété "Data".

0
Madhavan Nagarajan

Je suis un débutant en angular et en TypeScript, mais après avoir eu le même problème (sauf que pour moi, le tri n'a pas fonctionné non plus), ce qui m'a aidé a été de créer une fonction 'refreshDataScource()' et de l'avoir appelée à partir de ngAfterViewInit() ainsi qu'après chaque temps le serveur répond avec de nouvelles données. Dans cette fonction, je régénère simplement la dataSource avec le paginateur et le tri. Comme ça:

refreshDataSource() {
    this.dataSource = new MatTableDataSource(myDataArray);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

Il a corrigé le paginateur et le genre. Tout fonctionne maintenant parfaitement. Cependant, je ne suis pas sûr que ce soit juste une solution de contournement ou une vraie solution.

0
Gefilte Fish