Impossible d'ajouter la pagination à mon projet Angular

Question

J'ai essayé toutes les choses que je connais mais sans succès. Je veux ajouter une pagination à un tableau covid-19. Le paginateur montre combien de lignes sont dans le tableau mais il ne les divise pas en pages.

Voici le code que j'ai écrit.

Voici mon component.ts:

import { AfterViewInit, Component, HostListener, OnInit, ViewChild, } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable } from '@angular/material/table';
import { merge } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Countries, sortData } from '../app.model';
import { AppService } from '../app.service';
import { DataTableDataSource } from './data-table-datasource';
import { animate, state, style, transition, trigger, } from '@angular/animations';

@Component({
    selector: 'app-data-table',
    templateUrl: './data-table.component.html',
    styleUrls: ['./data-table.component.css'],
    animations: [
        trigger('detailExpand', [
            state('collapsed', style({ height: '0px', minHeight: '0' })),
            state('expanded', style({ height: '*' })),
            transition(
                'expanded <=> collapsed',
                animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
            ),
        ]),
    ],
})
export class DataTableComponent implements AfterViewInit {
    @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
    @ViewChild(MatSort) sort!: MatSort;
    @ViewChild(MatTable) table!: MatTable;
    @ViewChild('paginator', { read: MatPaginator }) paginatorlist: MatPaginator;
    dataSource: DataTableDataSource;
    filter: sortData = new sortData();

    /** Colonnes affichées dans le tableau. Les identifiants des colonnes peuvent être ajoutés, supprimés ou réorganisés. */
    displayedColumns = [];
    scrWidth: any;
    constructor(public appService: AppService) { }

    ngOnInit() {
        this.dataSource = new DataTableDataSource(this.appService);
        this.sortData(false);
        this.setupTable();
        this.getScreenSize();
    }

    sortData(isChange: boolean) {
        if (isChange) {
            this.filter.pageSize = this.paginator.pageSize;
            this.filter.pageNumber = this.paginator.pageIndex + 1;
            // this.filter.sortColumn = this.sort.active;
            // this.filter.sortDirection = this.sort.direction;
            console.log(this.paginator.pageIndex);
        } else {
            this.filter.pageSize = 15;
            this.filter.pageNumber = 1;
            // this.filter.sortColumn = 'todayCases';
            // this.filter.sortDirection = 'true';
            // console.log(this.filter);
        }
        this.dataSource.loadData(this.filter);
        (error) => console.error(error);
    }

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

Voici mon datasource.ts:

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { finalize, map } from 'rxjs/operators';
import { Observable, of as observableOf, merge, BehaviorSubject } from 'rxjs';
import { ApiResponse, Countries, sortData } from '../app.model';
import { AppService } from '../app.service';

export class DataTableDataSource extends DataSource {

    public dataSubject = new BehaviorSubject([]);
    private loadingSubject = new BehaviorSubject(false);
    public loading$ = this.loadingSubject.asObservable();
    private totalDataCountSubject = new BehaviorSubject(0);
    public totalDataCount$ = this.totalDataCountSubject.asObservable();
    paginator: MatPaginator;
    sort: MatSort;

    constructor(private appService: AppService) {
        super();
    }

    loadData(filter: sortData) {
        this.appService
            .getData(filter)
            .pipe(finalize(() => this.loadingSubject.next(false)))
            .subscribe((data: any) => {
                // console.log(data.response);
                if (data) {
                    this.totalDataCountSubject.next(data.length);
                    this.dataSubject.next(data);
                    console.log(data.length);
                }
            });
    }

    connect(): Observable {
        return this.dataSubject.asObservable();
    }

    disconnect(): void {
        this.dataSubject.complete();
        this.totalDataCountSubject.complete();
        this.loadingSubject.complete();
    }
}

Et voici mon HTML:

        Pays
            {{ row.country }}

        Cas
            {{ row.cases }}

        Actif
            {{ row.active }}

        Cas Aujourd'hui
            {{ row.todayCases }}

        Décès
            {{ row.todayDeaths }}

        Guéris
            {{ row.recovered }}

Merci d'avance

Answer 1

Le problème est que vous devez définir la longueur totale des données disponibles sur le paramètre pageSize du paginator.

Par exemple, vous avez des données sur 30 pays et votre pageSize est de 10. Ainsi, vous devez définir le paramètre pageSize du paginator sur 30 et vos données visibles seront de 10.

J'ai simulé votre AppService avec des données statiques. Et j'ai montré comment remplir les données pour la pagination.

Et vous avez également omis de filtrer les données après le changement du pageSize ou de la page. J'ai également effectué cela.

Observez la démo et vous pourrez comprendre.

Solution fonctionnelle créée sur Stackblitz

Answer 2

Il semble que votre Api de fin ne prend pas en charge le pagination des données. Il renvoie toutes les données même si vous les demandez avec les paramètres pageSize et pageNumber dans la chaîne de requête.

La solution est de paginer les données côté client. Le type de source de données que vous utilisez actuellement (DataSource) ajoutera plus de complexité dans le scénario de pagination des données côté client. Vous devriez utiliser le MatTableDataSource en tant que source de données - il dispose d'un support automatique de pagination des données une fois que vous lui avez fourni toutes les données.

Voici une version modifiée/simplifiée de votre StackBlitz que vous pouvez essayer -

Code du composant -

export class GalleryComponent implements OnInit {

    @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
    @ViewChild(MatSort) sort!: MatSort;
    dataSource = new MatTableDataSource([]);
    displayedColumns = ['country', 'cases', 'active', 'todayDeaths', 'recovered'];
    filter: sortData = new sortData();

    constructor(public appService: AppService) { }

    ngOnInit() {
        this.loadData();
    }

    loadData() {
        this.filter.sortColumn = 'country';
        this.filter.sortDirection = 'asc';
        this.appService.getData(this.filter).subscribe(
            p => {
                this.dataSource.data = p;
            },
            e => {
                console.log(e);
            });
    }

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

Dans le code du modèle, supprimez uniquement le lien length de la liaison du mat-paginator -

Cela devrait suffire pour faire fonctionner votre pagination. Vous n'avez pas besoin d'utiliser le DataTableDataSource.