angular - 没有垫表的垫分页
问题描述
我一直在尝试对不使用 mat-table 的结果列表实施 mat-pagination。但是,我在这里找到的所有示例都使用带有分页的 mat-table。
感谢您对此的帮助。
我目前正在从 onInit 上的解析器获取所有数据,并且每次用户与分页交互时都不需要从后端获取数据。
组件.html
<div class="axi-results-wrapper">
<mat-accordion>
<ng-container *ngFor="let process of Processes; let i = index;">
<mat-expansion-panel (opened)="setOpened(i)"
(closed)="setClosed(i)" hideToggle="true">
<mat-expansion-panel-header [collapsedHeight]="'66px'" [expandedHeight]="'60px'">
<div *ngIf="currentlyOpenedItemIndex !== i" class="row axi-results-row">
<span class="col-md-4 axi-results-row__txt">
<div class = "axi-result-circle axi-result-circle--bg-color">
<i class="far fa-copy"></i>
</div>
<div class="axi-results-row__txt axi-results-row__txt--primary">{{process.name}}</div>
</span>
<span class="col-md-3 axi-results-row__txt axi-results-row__txt--secondary">{{process.repoUrl}}</span>
<span class="col-md-3 axi-results-row__txt axi-results-row__txt--secondary">{{process.processType}}</span>
<span class="col-md-2 axi-results-row__txt axi-results-row__icon" *appHasAccess="roleTitle">
<span (click)="editProcess(process, i); $event.stopPropagation();">
<i class="material-icons">edit</i>
</span>
<span (click)="deleteProcess(process.id, i); $event.stopPropagation()">
<i class="material-icons">delete_outline</i>
</span>
</span>
</div>
<div *ngIf="currentlyOpenedItemIndex === i">
<app-result-header [iconType]="type" [headerName]="process.name" (editData)="editProcess(process, i)" (deleteFunc)="deleteProcess(process.id, i)"></app-result-header>
</div>
</mat-expansion-panel-header>
<app-process-detail-view [process]="process"></app-process-detail-view>
</mat-expansion-panel>
</ng-container>
</mat-accordion>
<mat-paginator [length]="length"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
</div>
组件.ts
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
constructor(private actr: ActivatedRoute) { }
ngOnInit() {
this.getProcessService();
}
getProcessService() {
// Getting all the data fetched from the active route
this.actr.data.subscribe((res) => {
this.Processes = res.process;
});
}
解决方案
mat-paginator 与其他组件一样,具有inputs
和 outputs
. 您使用[name of property]
和输出控制输入(name of output)="yourFunction($event)"
所以你可以使用,例如
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="change($event)">
</mat-paginator>
change(event:PageEvent)
{
//make something
console.log(event.length);
console.log(event.pageIndex);
console.log(event.pageSize);
console.log(event.previousPageIndex)
//possible call to a function in a service to get data from one index to another one
this.obs$=this.data.service.getItems(event.previousPageIndex*event.pageSize,
event.PageIndex*event.pageSize
)
}
推荐阅读
- c# - 围绕物体旋转相机,轻松改变位置
- javascript - iOS Safari 13.5 flickering on fixed element with long content
- node.js - Unable to upload file to S3 due to write EPIPE Networking Error
- html - Make divs on the top of the other div
- c# - C# - How to insert bulk data in Excel via Microsoft Office Interop Excel
- php - apache/php/oci 自动用问号替换 unicode 字符 - 如何?
- javascript - vue-cli eslint 没有捕获错误
- php - 将 guzzle 响应数据推送到数组并传递给 laravel 中的查看
- steam - 如何获取给定 Steam 应用程序的所有所有者?
- typescript - TypeScript 错误:事件处理程序的“对象”类型上不存在属性“目标”