[英]mat-pagination without mat-table
I have been trying to implement mat-pagination to my result list which does not use the mat-table.我一直在尝试对不使用 mat-table 的结果列表实施 mat-pagination。 However, all the examples I found here are using mat-table with pagination.
但是,我在这里找到的所有示例都使用带有分页的 mat-table。
Appreciate your help regarding this.感谢您对此的帮助。
I'm currently getting all the data from the resolver on onInit and do not need to fetch data from the backend every time a user interacts with the pagination.我目前正在从 onInit 上的解析器获取所有数据,并且每次用户与分页交互时都不需要从后端获取数据。
component.html组件.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>
component.ts组件.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;
});
}
A mat-paginator is as others components, has inputs
and outputs
. mat-paginator 与其他组件一样,具有
inputs
和outputs
。 You control the inputs using [name of property]
and outputs (name of output)="yourFunction($event)"
您使用
[name of property]
和 outputs (name of output)="yourFunction($event)"
控制输入
So you can use,eg所以你可以使用,例如
<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
)
}
Optionally you can save yourself all this effort by putting the ng-container inside a table, with just one <tr>
and one <td>
.或者,您可以通过将 ng-container 放在一个表中来节省所有这些努力,只有一个
<tr>
和一个<td>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.