MatTable не заполняет данные из Observable

Question

Я использую AngularFire для получения массива документов из базы данных пожарного магазина. В консоли разработчика отображаются данные, которые выбираются, но таблица не заполняется на сайте. Вот мой класс обслуживания:

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 в своем классе компонентов, как показано ниже:

 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 функция вместо функции из , возвращающая наблюдаемое, но которое вообще не получало никаких данных; 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

Я получил его для работы, удалив оператор debounceTime и увеличив интервал оператора задержки с 20 мс до 1000 мс. По моим наблюдениям, компоненту MatTable на стороне клиента требовалось больше времени для рендеринга до получения асинхронных данных. Класс компонента теперь выглядит следующим образом:

 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

Answer 2

1

, поскольку вы обновляете источник данных в подписке, вы должны использовать ChangeDetectorRef для обновления представления.

вставляет ChangeDetectorRef в construnctor.

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