英文:
Angular material table to change data based on click of next results
问题
我正在使用Angular Material表格，分页的要求是，初始时只显示5条记录，当点击下一页按钮时，需要显示剩下的5条记录，当点击前5个结果时，需要返回到0到4索引值。
TS：
pageChange() {
this.dataElement.slice(0, 5);
}
HTML：
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- 位置列 -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- 姓名列 -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<h2 class="pagination-style" (click)="pageChange()">Next 5 results</h2>
英文:
i am using angular material table, and here pagination requirement is that, initial need to show only 5 records and when click of next button, need to show rest 5 records, when click of previous 5 results, it has to come back to 0to 4 index values.
TS:
pageChange() {
this.dataElement.slice(0, 5);
}
HTML:
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<h2 class="pagination-style" (click)="pageChange()">Next 5 results</h2>
答案1
得分: 1
slice返回数组的一部分，但不会影响原始数组。splice通过删除、替换或添加值来更改原始数组，并返回受影响的值。
希望这有所帮助！
英文:
slice returns a piece of the array but it doesn't affect the original array. splice changes the original array by removing, replacing, or adding values and returns the affected values
Hope this helps !
答案2
得分: 0
你可以使用<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.html
英文:
You can use <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.html
答案3
得分: 0
使用 slice pipe
<table mat-table [dataSource]="dataSource | slice: 0:(page + 1) * pageSize">
..
</table>
其中 page 的值从 0 到页面数，而 pageSize 是每次要显示的元素数量（在您的情况下为 5）。
英文:
Use slice pipe
<table mat-table [dataSource]="dataSource |slice:0:(page+1)*pageSize">
..
</table>
where page goes from 0 to the number of pages and pageSize is how many element you want to show each time (in your case 5)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论