我想使用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();
}
}
}
(page)="pageEvent = OnPageChange($event)"
替换为(page)="OnPageChange($event)"
后,问题得到了解决。这可能对其他人也有所帮助。感谢 @SachinParashar。 - Saad Abbasi