typescript - 如何在 mat-card 中使用角度材料分页?
问题描述
我想使用mat-card指令来展示我的产品。在我看来,角度材料文档并不详尽。我在 Internet 上找到了许多使用 Table with dataSource的示例(示例 1,示例 2)
现在我得到包含所有产品的 productList 并使用 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>
*组件.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();
}
}
}
解决方案
我有完全相同的要求,我使用mat-paginator 和包含 mat-cards 的 mat-grid-list来做到这一点。我使用 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;
}
希望能帮助到你。
推荐阅读
- c# - StartCoRoutine(string) 没有实现预期的效果
- arm - 在 ARM Cortex-M、MSP 或 PSP 中,哪个堆栈用于复位?
- jquery - 有没有更好的方法来处理 Django 的 AJAX 文件下载?
- css - jsp和tomcat的css mime类型问题
- node.js - 如何将我的 get 请求传递到我的 res.render 中?
- clojure - 如何在clojure中测试密钥是否为UUID
- javascript - Kadane的算法没有返回最大连续总和的正确值?
- dart - Dart 中的构造函数和初始化列表有什么区别?
- wordpress - 如何手动将地址从 http 更改为 HTTPS?
- angular - NgRX Effect 用于下载媒体文件和调度进度动作,直到调度完成动作