如何在mat-card中使用angular-material分页功能？

Question

我想使用mat-card指令展示我的产品。Angular-material 文档 对我来说不够详尽。我在网上找到了许多使用带有dataSource的表格的示例（示例1，示例2）

现在我使用ngFor迭代显示所有产品，将所有产品显示在页面上。我该如何将productList提供给分页器，并迭代处理后的数据（paginationList）。

*component.html文件展示了所有产品：

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

- Sergei R

Answer 1

我有完全相同的要求，我使用包含mat-cards的mat-grid-list和mat-paginator来实现。我使用mat-grid-list使我的列表具有响应性，以便它可以根据屏幕大小调整一行中元素的数量。这是我做的：

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

这就是组件的外观：

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

希望这能有所帮助。

- Sachin Parashar

---

这次真的帮了我很多！你救了我的命（至少是我的工作）。谢谢！ - Katherine

@Katherine 很高兴听到这个！ - Sachin Parashar

我之前遇到了一个错误，但将 (page)="pageEvent = OnPageChange($event)" 替换为 (page)="OnPageChange($event)" 后，问题得到了解决。这可能对其他人也有所帮助。感谢 @SachinParashar。 - Saad Abbasi

Answer 2

这篇帖子回答了这个问题。

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

在你的HTML文件中。

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

我能够使这段代码正常工作。如果上述代码不足以解释，我可以在此处发布整个代码（代码在另一台机器上，因此现在无法粘贴）。同时请注意，上面的代码是手写的（而非从编辑器粘贴），因此可能会有一些小问题。

希望这能有所帮助。

- Sandy

---

数据源的作用是什么？我不理解this.productList和数据源之间的关联。我还在寻找一种适合使用*ngFor列表分页而不需要借助任何库的好方法。 - John