小编Sup*_*tha的帖子

如何使用分页在 angular 7 Mat-table 中设置正确的序列号

我在我的 Angular7 应用程序中使用了一个带有 firebase 的 mat-table 并成功填充了它。我想添加一个自动递增的序列号。

我的代码的Html

<mat-table #table2 [dataSource]="dataSource2" matSort>
 <ng-container matColumnDef="sn">
 <mat-header-cell *matHeaderCellDef mat-sort-header> SN. </mat-header-cell>
 <mat-cell *matCellDef="let element; let i = index;">{{i+1}}</mat-cell>
  </ng-container>
 <ng-container matColumnDef="description">
 <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.description}} </mat-cell>
  </ng-container>
 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>
Run Code Online (Sandbox Code Playgroud)

分页问题

  • 当我转到下一页时,索引再次从一个开始。
  • 如果我每页显示 5 个项目,那么在转到下一页后,它从一个而不是 6 个开始。

pagination angular-material angular angular-material-table angular7

1
推荐指数
1
解决办法
2514
查看次数

如何在 Firestore Angular7 中使用 orderBy 和 snapshotChanges()

我想使用此代码在 Firestore 中按“员工”文档的“全名”排序。

在 service.ts

 getEmployees() {   
    return this.firestore.collection('employee').snapshotChanges();
  }
Run Code Online (Sandbox Code Playgroud)

在 Component.ts 中

  ngOnInit() {
            this.service.getEmployees().subscribe(actionArray => {
           let array = actionArray.map(item => {
             return {
               id: item.payload.doc.id,
               ...item.payload.doc.data()
             };

           });
         ....
}     
Run Code Online (Sandbox Code Playgroud)

我是初学者。我需要对此代码进行哪些更改才能获得所需的输出。谢谢

angular google-cloud-firestore angular7

0
推荐指数
1
解决办法
768
查看次数