如何使用带有垫卡的角材料分页? [英] How to use angular-material pagination with mat-card?

问题描述

我想使用 ma​​t-card 指令来展示我的产品.角度材料 文档 在我看来并不彻底.我在 Internet 上找到了许多使用 Table 和 dataSource 的示例( 示例 1、示例 2 )

现在我获得了包含所有产品的 productList 并使用 ngFor 对其进行迭代.我在页面上显示所有产品.如何将 productList 提供给分页器并迭代处理后的数据 ( paginationList ).

*component.html 文件显示所有产品:

*component.ts

导出类 ListComponent 实现 OnInit, OnDestroy {公共产品列表:产品[] = [];公共分页列表:产品[] = [];ngOnInit() {//我收到了产品this.activatedRoute.params.subscribe((params: any) => {this.catalogService.getProductList().do((产品:任何) => {this.productList = 产品；}).订阅();}}}

解决方案

我有完全相同的要求，我使用 ma​​t-paginator 和包含 mat-cards 的 mat-grid-list.我使用 mat-grid-list 使我的列表具有响应性，以便它可以调整编号.根据屏幕尺寸排成一行的元素.这是我所做的:

</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>

</mat-grid-tile></mat-grid-list>

这是组件的样子:

 productsList: Product[]= [];分页列表:产品[]= [];断点:数字 = 3；//调整到屏幕//MatPaginator 输入长度:数字 = 0；页面大小:数字 = 3；//每行显示三张卡片pageSizeOptions: number[] = [3, 6, 9, 12];ngOnInit() {this.breakpoint = (window.innerWidth <= 800) ?1:3；this.productsList = ;this.pagedList = this.productsList.slice(0, 3);this.length = this.productsList.length;});}OnPageChange(事件:PageEvent){让 startIndex = event.pageIndex * event.pageSize;让 endIndex = startIndex + event.pageSize;if(endIndex > this.length){endIndex = this.length;}this.pagedList = this.productsList.slice(startIndex, endIndex);}onResize(event) {//调整到屏幕大小this.breakpoint = (event.target.innerWidth <= 800) ?1:3；}

希望有帮助.

I want to use mat-card directive for show my products.The angular-material docs seems to me not thorough. I found many examples on the Internet with using Table with dataSource ( example 1, example 2 )

Now I get the productList with all products and iterate it with ngFor. I show all products on the page. How can I feed the productList to the paginator and iterate with processed data ( paginationList ).

*component.html file it show all products:

<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>

*component.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();
    }
  }
}

解决方案

I had the exact same requirement and I did this using mat-paginator with mat-grid-list containing the mat-cards. I used mat-grid-list to make my list responsive so that it can adjust the no. of elements in a row according to screen size. Here is what I did:

<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>

This is what component looks like:

  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;
  }

Hope it helps.

这篇关于如何使用带有垫卡的角材料分页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！