带有 Firebase 数据的 Angular Material 表 - 分页器和排序显示但不起作用答案

【问题标题】：Angular Material table with Firebase data - paginator and sort show but do not work带有 Firebase 数据的 Angular Material 表 - 分页器和排序显示但不起作用
【发布时间】：2020-09-06 18:28:58
【问题描述】：

我有一个 Angular Material 表，其中包含按预期填充的 Firebase 数据库中的数据，但是当我尝试按照文档添加分页器和排序时，它们都是可见的（我可以看到分页器 div 和选项以及动画排序点击标题）但都不起作用，即排序或更改查看的项目。

我该如何调查？

HTML sn-p:

<mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.name}} </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 
    #paginator
    [pageSize]="10"
    [pageSizeOptions]="[5, 10, 20]"
    [showFirstLastButtons]="true"
>
</mat-paginator>

TS：

import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';

...

itemList: Item[];
displayedColumns = ['name', 'quantity', 'description', 'equippable', 'attunement', 'edit', 'delete'];
dataSource = new MatTableDataSource(this.itemList);

...

@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

...


ngOnInit() {

    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;

    let data = this.itemService.getData();
    data.snapshotChanges().subscribe(item => {
        this.itemList = [];
        item.forEach(element => {
            let json = element.payload.toJSON();
            json["$key"] = element.key;
            this.itemList.push(json as Item);
        });
    this.dataSource = new MatTableDataSource(this.itemList);

    });

}

【问题讨论】：

标签： angular firebase firebase-realtime-database angular-material angular5

【解决方案1】：

所以我发现因为我将 Firebase 数据存储在订阅中，如果我像演示一样启动排序和分页，它将无法工作。在 ngOnInit 中设置订阅后，我必须启动排序和分页，如下所示：

ngOnInit() {

    let data = this.itemService.getData();
    data.snapshotChanges().subscribe(item => {

        this.itemList = [];

        item.forEach(element => {
            let json = element.payload.toJSON();
            json["$key"] = element.key;
            this.itemList.push(json as Item);
        });

        this.dataSource = new MatTableDataSource(this.itemList);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;

    });
}

【讨论】：

【解决方案2】：

如果您使用函数获取数据一次，请按如下方式定义函数：此函数从 Firestore 获取数据。

    async getAnimalData() {
        await this.animalRef.get().then(QuerySnapshot => {
          QuerySnapshot.forEach(QueryDocumentSnapshot => {
            console.log(QueryDocumentSnapshot.data().Gender_Type)
              this.herd.push(QueryDocumentSnapshot.data());
          })
    }).catch(error => {
      console.log(error);
    })
  }

然后在你的 ngOnInit() 函数中，使用：

ngOnInit() {
    this.getAnimalData().then(val =>{
      this.dataSource = new MatTableDataSource(this.herd);
      setTimeout(() => {
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      });
    });
}

async 函数将返回一个 promise，并且 .then 将在完成 async 函数后进行评估。希望对您有所帮助！

【讨论】：