table 数据源更新但不显示内容

Question

我正在尝试为一个项目建立一个电影观看列表table。问题是，当我从 firebase 获取我的数据数组时，我创建了一个 MatTableDataSource 并将其归因于我收到的数组，但我没有在屏幕上获得任何输出。我该如何解决？我需要调用重新加载函数吗？

页面显示的示例： https://imgur.com/a/X0aubfw

主页-component.ts

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Movie } from 'src/app/core/models/movie';
import { MovieService } from 'src/app/core/services/movie.service';

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.scss']
})


export class MainPageComponent implements OnInit {
  
  movieData: MatTableDataSource<Movie>;
  displayedColumns: string[] = ['title', 'genre', 'watchStatus', 'rating', 'wouldRecommend'];
  constructor(private movieService: MovieService) { }

  async getMoviesOfUser() {
    let resultData : Movie[] = this.movieService.getAllMoviesOfUser("1W43qABYx3WAdcrpL2cz");
    this.movieData = new MatTableDataSource(resultData);
  }

  ngOnInit(): void {
    this.getMoviesOfUser();
    console.log(this.movieData.data);
  }

}

主页-component.html

<div class="container-page">
    <p id="toolbar-top">
        <mat-toolbar color="primary">
            Welcome (de pus numele userului aici)
            <button mat-icon-button id="logout-icon">
                <mat-icon>logout</mat-icon> Logout
            </button>
        </mat-toolbar>
    </p>
    <table class="mat-elevation-z8 table-main" mat-table [dataSource]="movieData" >
        <ng-container matColumnDef="title">
            <th mat-header-cell *matHeaderCellDef> Title </th>
            <td mat-cell *matCellDef="let element"> {{element.title}} </td>
        </ng-container>
        <ng-container matColumnDef="genre">
            <th mat-header-cell *matHeaderCellDef> Genre </th>
            <td mat-cell *matCellDef="let element"> {{element.genre}} </td>
        </ng-container>
        <ng-container matColumnDef="watchStatus">
            <th mat-header-cell *matHeaderCellDef> Status </th>
            <td mat-cell *matCellDef="let element"> {{element.watchStatus}} </td>
        </ng-container>
        <ng-container matColumnDef="rating">
            <th mat-header-cell *matHeaderCellDef> Rating </th>
            <td mat-cell *matCellDef="let element"> {{element.rating}} </td>
        </ng-container>
        <ng-container matColumnDef="wouldRecommend">
            <th mat-header-cell *matHeaderCellDef> Recommended ? </th>
            <td mat-cell *matCellDef="let element"> {{element.wouldRecommend}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

电影-service.ts

import { Injectable } from '@angular/core';

import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Movie } from '../models/movie';


@Injectable({
  providedIn: 'root'
})
export class MovieService {
  moviesRef = this.database.collection('Movies');

  constructor(private database: AngularFirestore) { }

  getAllMoviesOfUser(userID: string) {
    let result: any[] = [];
    this.moviesRef.ref.where('includedBy', '==', userID).get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => result.push(doc.data()));
    });
    return result;
  }
}

电影界面

export interface Movie {
    includedBy : string;
    title : string;
    genre : string;
    watchStatus : string;
    rating : string;
    wouldRecommend : string;
}

Answer 1

首先，我建议您将 return 类型添加到方法中。它会帮助你。

秒。在组件中你有异步，但是等待在哪里？

第三。在服务中，您对数据库有异步请求。但是你 return 在请求完成之前得到了结果。所以你有空数组。

问题不在 mat-table。从服务获取数据时出现问题。

试试这个

async getMoviesOfUser() {
    let resultData : Movie[] = await this.movieService.getAllMoviesOfUser("1W43qABYx3WAdcrpL2cz");
    this.movieData = new MatTableDataSource(resultData);
}

在服务中是这样的

 async getAllMoviesOfUser(userID: string) {
    const snapShots = await this.moviesRef.ref.where('includedBy', '==', userID).get();
    return snapShots.map(item => item.data());
 }

table 数据源更新但不显示内容

table datasource updating but not displaying the content

data-binding

angular-material

angular