Mat-table工作完美。有没有办法添加自动增量索引。我的html代码:
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="no">
<th mat-header-cell *matHeaderCellDef> No </th>
<td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
<td mat-cell *matCellDef="let element"> <a (click)="openDescriptionView(element.title, element.imageUrl, element.description)">{{element.title}}</a>
</td>
</ng-container>
<ng-container matColumnDef="destination">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Destination </th>
<td mat-cell *matCellDef="let element"> {{element.destination}} </td>
</ng-container>
<ng-container matColumnDef="startDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </th>
<td mat-cell *matCellDef="let element"> {{element.startDate}}</td>
</ng-container>
<ng-container matColumnDef="endDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> End Date </th>
<td mat-cell *matCellDef="let element">{{element.endDate}}</td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef mat-sort-header> price </th>
<td mat-cell *matCellDef="let element">{{element.price}}</td>
</ng-container>
<ng-container matColumnDef="setting">
<th mat-header-cell *matHeaderCellDef> Settings </th>
<td mat-cell *matCellDef="let element">
<a class="myIcon" (click)="editOffer(element.id)"><i class="pe-7s-pen"></i></a>
<a class="myIcon" (click)="deleteOffer(element.id, element.title)"><i class="pe-7s-trash"></i></a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
我转到下一页,它是从一个开始的。如果我每页显示10个项目,那么转到下一页之后,它以一个而不是十一开始。我还尝试了让i = dataindex,并显示" nan"。请帮助。
您可以使用像这样计算运行索引的单元格:
<td mat-cell *matCellDef="let element; let i = index;">
{{paginator.pageIndex * paginator.pageSize + i + 1}}
</td>
使用这样的指示符:
<mat-paginator #paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
这是一个证明这一点的stackblitz。
您可以将一个PageIndex变量设置为初始化为首页的PageIndex变量...在"下一页"的每次点击中,将其设置为PageIndex = PageIndex 10;foir每次点击"后页"的每次点击将其设置为pageIndex = pageIndex -10;