帶有 Firebase 數據的 Angular Material 表 - 分頁器和排序顯示但不起作用

Question

我有一個 Angular Material 表，其中包含來自 Firebase 數據庫的數據，按預期填充，但是當我嘗試按照文檔添加分頁器和排序時，它們都是可見的（我可以看到分頁器 div 和選項以及單擊標題時的動畫排序) 但都不起作用，即排序或更改查看的項目。

我該如何調查？

html片段：

<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);

    });

}

Answer 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;

    });
}

Answer 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 函數后進行評估。 希望能幫助到你！