MatTable 没有从 Observable 填充数据

Question

我正在使用 AngularFire 从 firestore 数据库中检索一组文档。在开发人员控制台中，它显示正在获取的数据，但 table 未在网站上填充。这是我的服务 class:

import { Injectable } from '@angular/core';
import {Observable, of} from 'rxjs';
import { AngularFirestore, DocumentData } from '@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';


@Injectable({
  providedIn: 'root'
})
export class DatabaseHandlerService {
  constructor(private afStore: AngularFirestore, private afAuth: AngularFireAuth) {

  }

  // Get my complaints asynchronously
  getMyComplaints(): Observable<Item[]>{

    const usID = this.afAuth.auth.currentUser.uid;
    const newstuff = [];

    this.afStore.collection('user').ref.where('userID','==',usID).get().then(function(snapshot) {
      snapshot.docs[0].ref.collection('mycomplaints').
      get().then(function(snapshot){
        //console.log(snapshot.docs[0].data());
        snapshot.forEach(function(doc){
          newstuff.push(doc.data());
        });  
      });
    });

    return of(newstuff as Item[]);
  }

}

我正在订阅组件中的 Observable class，如下所示：

 ngOnInit() {
    this.getComplaints();
  }

  getComplaints(): void {
    this.handler.getMyComplaints().pipe(debounceTime(20), delay(20)).
    subscribe(data => { 
      this.dataSource = new MatTableDataSource(data);
      console.log(data);
    },error=>{
      console.log(error);
    },()=>{
      console.log('Data fetched');
    });
  }

我尝试使用 forkJoin 函数而不是 of 函数来 return Observable 但没有获取任何数据； forkJoin 被建议在下面 .

已编辑：这是 MatTable 的模板文件：

<div class="container mt-5 pb-5">
    <div class="text-center mb-5 mt-5">
        <h1>My Complaints</h1>
    </div>
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>

    <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="badgeNumber">
            <mat-header-cell *matHeaderCellDef> Badge #
            </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.badgeNumber}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="lastName">
            <mat-header-cell *matHeaderCellDef> Last Name
            </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>


</div>

Answer 1

1

因为您是在订阅中更新数据源，所以您应该使用 ChangeDetectorRef 更新视图。

将 ChangeDetectorRef 注入构造函数。

constructor(private cd: ChangeDetectorRef)

并在 .subscribe() 内添加：

this.cd.markForCheck()

2

在您的 .html 文件中

<table mat-table [dataSource]="dataSource | async">

并在您的 .ts 文件中

 getComplaints():Observable<Item[]{
  this.dataSource = this.handler.getMyComplaints().pipe(debounceTime(20), delay(20));
  }

Answer 2

我通过删除 debounceTime 运算符并将延迟运算符间隔从 20 毫秒增加到 1000 毫秒来让它工作。根据我的观察，客户端 MatTable 组件在接收异步数据之前需要更多时间来呈现。组件 class 现在看起来像这样：

 ngOnInit() {
    this.getComplaints();
  }

  getComplaints(): void {
    this.handler.getMyComplaints().pipe(delay(1000)).
    subscribe(data => { 
      this.dataSource = new MatTableDataSource(data);
      console.log(data);
    },error=>{
      console.log(error);
    },()=>{
      console.log('Data fetched');
    });
  }

感谢@alin0509 和@developer033 的帮助

MatTable 没有从 Observable 填充数据

MatTable isn't populating data from Observable

angular-material

angularfire2

angular