angular - 从 Firestore 加载 Firebase 内容的 Angular 材料表批次

Question

我正在尝试在我的 Angular 应用程序中从 Firebase 的 firestore 中的集合中获取数据，但没有数据出现，而数据库中有数据。我尝试将数据的获取从我的数据服务移动到组件，但那里没有任何效果。

组件 HTML 文件

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="communityTitle">
        <th mat-header-cell *matHeaderCellDef> Community Title/Name </th>
        <td mat-cell *matCellDef="let element"> {{element.communityTitle}} </td>
    </ng-container>
    <ng-container matColumnDef="dateOfBlacklist">
        <th mat-header-cell *matHeaderCellDef> Date of Blacklist </th>
        <td mat-cell *matCellDef="let element"> {{element.dateOfBlacklist}} </td>
    </ng-container>
    <ng-container matColumnDef="reason">
        <th mat-header-cell *matHeaderCellDef> Reason for Blacklist </th>
        <td mat-cell *matCellDef="let element"> {{element.reason}} </td>
    </ng-container>
    <ng-container matColumnDef="effectiveDate">
        <th mat-header-cell *matHeaderCellDef> Effective Until (Date) </th>
        <td mat-cell *matCellDef="let element"> {{element.effectiveDate}} </td>
    </ng-container>
    <ng-container matColumnDef="notes">
        <th mat-header-cell *matHeaderCellDef> Notes </th>
        <td mat-cell *matCellDef="let element"> {{element.notes}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

组件打字稿文件

import { Component, OnInit } from '@angular/core';
import { BlacklistedCommunityData } from 'src/app/interface';
import { DataService } from 'src/app/data.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-rules-blacklisted-communities',
  templateUrl: './rules-blacklisted-communities.component.html',
  styleUrls: ['./rules-blacklisted-communities.component.scss']
})
export class RulesBlacklistedCommunitiesComponent implements OnInit {

  itemCollection: AngularFirestoreCollection<BlacklistedCommunityData>
  items: Observable<BlacklistedCommunityData[]>

  constructor(private dataService: DataService, private afs: AngularFirestore) {
    this.itemCollection = this.afs.collection('fzrpBlacklistedCommunities');
    this.items = this.itemCollection.valueChanges();
    console.log(this.items)
  }

  displayedColumns = [
    'communityTitle', 
    'dateOfBlacklist', 
    'reason', 
    'effectiveDate', 
    'notes'
  ];
  dataSource = this.items;

  ngOnInit(): void {
  }

}

标签： angularfirebasegoogle-cloud-firestoreangular-material

Answer 1

将上面的打字稿文件修改为以下内容后，问题已得到解决：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

...

export class RulesBlacklistedCommunitiesComponent implements AfterViewInit {

  dataSource: MatTableDataSource<any>;
    displayedColumns = [
    'communityTitle', 
    'dateOfBlacklist', 
    'reason', 
      'effectiveDate', 
      'notes'
    ];

  constructor(private dataService: DataService, private afs: AngularFirestore) {

  }

//  dataSource = new MatTableDataSource<any>(this.items);

  ngAfterViewInit() {
    this.afs.collection('fzrpBlacklistedCommunities').valueChanges().subscribe(data => {
      this.dataSource = new MatTableDataSource(data);
    })
  }
}