來自 angular 材料的 Mat-Table 不顯示來自 firebase 的數據

Question

我正在使用Angular 、 NgRedux和firebase （實時數據庫）。 我正在嘗試將我獲取的數據顯示到 Angular/material 的 mat-table 中。 我可以在控制台中看到數據，但在表格中看不到。 我只能在表中顯示我的本地數據，正如您在下面的events.component.html temple 中看到的那樣。

我對 Angular 很陌生。非常感謝任何幫助。

這是我的events.component.ts文件

import { NgRedux } from '@angular-redux/store';
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { Event } from '../entities/Event';
import { EventeActions } from '../store/actions/EventAcitons';
import { AppState } from '../store/Store';


@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.scss']
})
export class EventsComponent implements OnInit{
  public events: Event[];

  private availableEvents: Event[] = [
    { 
      event: 'Picnic', 
      date: '12/02/2021', 
      location: 'Rådhusstrædet', 
      status: 'published' 
    },
    { 
      event: 'Surfing', 
      date: '11/04/2021', 
      location: 'København V', 
      status : 'draft' 
    },
  ];

  displayedColums = ['event', 'date', 'location', 'status'];
  dataSource = new MatTableDataSource<Event>();

  getAvailableEvents() {
    return this.availableEvents.slice();
  }

  constructor(
    private router: Router,
    private ngRedux: NgRedux<AppState>,
    private eventActions: EventeActions
    ) { }

  ngOnInit(): void {
    this.eventActions.readEvent();

    //  this.dataSource.data = this.getAvailableEvents();

    this.ngRedux.select(state => state.events).subscribe(res => {
      this.events = res.events;
    })

    
  }

  editPost(id: any) {
    this.router.navigate(['neweditevent', {myId: id}])
  }

}

這是我的 events.component.html 文件

<h1 class="title">Planned Events</h1>
<div class="flexHeader">
  <button mat-raised-button color="primary" routerLink="/neweditevent" id="newEditBtn">New Event</button>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  
    <ng-container matColumnDef="event">
      <th mat-header-cell *matHeaderCellDef> Event </th>
      <td mat-cell *matCellDef="let element"> {{element.event}} </td>
    </ng-container>
  
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef> Date </th>
      <td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
    </ng-container>
  
    <ng-container matColumnDef="location">
      <th mat-header-cell *matHeaderCellDef> Location </th>
      <td mat-cell *matCellDef="let element"> {{element.location}} </td>
    </ng-container>
  
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="let element"> {{element.status}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColums"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColums;"></tr>
  </table>

先感謝您...

Answer 1

嘗試這樣的事情

ngOnInit(): void {
 this.eventActions.readEvent();

 //  this.dataSource.data = this.getAvailableEvents();

 this.ngRedux.select(state => state.events).subscribe(res => {
   this.events = res.events;
   this.dataSource.data = this.events;
 })
}