web-dev-qa-db-fra.com

Comment utiliser la pagination de matériaux angulaires avec mat-card?

Je souhaite utiliser la directive mat-card pour afficher mes produits.Le matériel angulaire docs ne me semble pas exhaustif. J'ai trouvé de nombreux exemples sur Internet en utilisant Table avec dataSource ( exemple 1 , exemple 2 )

Maintenant, je récupère productList avec tous les produits et je le répète avec ngFor. Je montre tous les produits sur la page. Comment puis-je alimenter productList au paginateur et itérer avec les données traitées (paginationList).

* fichier composant.html, il montre tous les produits:

<mat-paginator #paginator 
  [length]="productList.length" 
  [pageSize]="5" 
  [pageSizeOptions]="[5, 10, 25, 100]" 
  [showFirstLastButtons]="true"
</mat-paginator>

<ng-container *ngIf="productList.length; else notHeaveProducts">
  <mat-card class="product-card" *ngFor="let product of productList">
    <mat-card-header>
      <mat-card-title>
        <h3>{{ product.title }}</h3>
      </mat-card-title>
    </mat-card-header>
    <img mat-card-image [src]="product.img_url" [alt]="product.title" [title]="product.title">
    <mat-card-content>
      <p>{{ product.description }}</p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="accent" (click)="addItemToCard(product)">Add to card</button>
    </mat-card-actions>
  </mat-card>
</ng-container>

* composant.ts

export class ListComponent implements OnInit, OnDestroy {
  public productList: Product[] = [];
  public paginationList: Product[] = [];

  ngOnInit() {
    // I receive the products
    this.activatedRoute.params.subscribe((params: any) => {
      this.catalogService.getProductList()
        .do((products: any) => {
          this.productList = products;
        })
        .subscribe();
    }
  }
}
typescriptpaginationangular-material2
5
Sergei R

This Post répond à la question.

observableData: Observable<any>;
ngOnInit() {
    this.observableData = this.dataSource.connect();
}

Et dans votre fichier HTML.

<mat-card *ngFor="let item of observableData | async">
</mat-card>

Je suis capable de faire fonctionner ce code. Si le code ci-dessus ne suffit pas pour expliquer, je peux poster tout le code ici (le code est sur une autre machine et ne peut donc pas être collé maintenant). Voir aussi le code ci-dessus est écrit à la main ici (pas collé à partir de l'éditeur) donc peut faire face à des problèmes mineurs.

J'espère que ça aide.

1
Sandy

J'avais exactement la même exigence et je l'ai fait en utilisant mat-paginator avec mat-grid-list contenant les mat-cards . J'ai utilisé mat-grid-list pour rendre ma liste réactive afin qu'elle puisse ajuster le no. d'éléments dans une rangée en fonction de la taille de l'écran. Voici ce que j'ai fait: 

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

<mat-grid-list [cols]="breakpoint" rowHeight="4:5" (window:resize)="onResize($event)" >
  <mat-grid-tile *ngFor="let product of pagedList">
    <div>
      <mat-card class="example-card">
          mat-card content here..
      </mat-card>
    </div>
  </mat-grid-tile>
</mat-grid-list>

Voici à quoi ressemble ce composant:

  productsList: Product[]= [];
  pagedList: Product[]= [];
  breakpoint: number = 3;  //to adjust to screen
  // MatPaginator Inputs
  length: number = 0;
  pageSize: number = 3;  //displaying three cards each row
  pageSizeOptions: number[] = [3, 6, 9, 12];

  ngOnInit() {
        this.breakpoint = (window.innerWidth <= 800) ? 1 : 3;
        this.productsList = <GetOrInitializeYourListHere>;
        this.pagedList = this.productsList.slice(0, 3);
        this.length = this.productsList.length;
    });
  }

  OnPageChange(event: PageEvent){
    let startIndex = event.pageIndex * event.pageSize;
    let endIndex = startIndex + event.pageSize;
    if(endIndex > this.length){
      endIndex = this.length;
    }
    this.pagedList = this.productsList.slice(startIndex, endIndex);
  }

  onResize(event) { //to adjust to screen size
    this.breakpoint = (event.target.innerWidth <= 800) ? 1 : 3;
  }

J'espère que ça aide.

1
Sachin Parashar