Angular Material 5结合AngularFirebase2 v5：Firebase数据无法显示在表格中

嗨，我来帮你搞定这个问题！你的代码里有个核心问题：valueChanges()返回的是Observable（异步数据流），而MatTableDataSource需要的是实际的同步数据数组，直接把Observable传给数据源，表格没办法自动解析异步加载的数据。

下面给你两种实用的解决方案：

方案1：手动订阅Observable更新数据源 #

适合需要在组件内对数据做额外处理的场景：

修改组件代码：

import { MatTableDataSource } from '@angular/material/table';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs';

export class YourComponent {
  // 用$后缀标识Observable是社区惯例，方便区分异步数据
  private sellEntries$: Observable<any[]>;
  dataSource = new MatTableDataSource<any>([]);
  // 必须定义表格要显示的列字段，要和Firebase数据里的字段名对应
  displayedColumns: string[] = ['字段1', '字段2'];

  constructor(private db: AngularFireDatabase) {
    this.sellEntries$ = this.db.list('sellEntries').valueChanges();
    // 订阅Observable，当Firebase数据更新时同步更新表格数据源
    this.sellEntries$.subscribe(data => {
      this.dataSource.data = data;
    });
  }
}

模板保持原有结构，直接绑定组件内的dataSource：

<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">
    <!-- 列定义示例 -->
    <ng-container matColumnDef="字段1">
      <th mat-header-cell *matHeaderCellDef> 字段1名称 </th>
      <td mat-cell *matCellDef="let item"> {{item.字段1}} </td>
    </ng-container>

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

方案2：使用Async管道（推荐） #

这种方式更简洁，Angular会自动帮你处理订阅和取消订阅，避免内存泄漏：

简化组件代码：

import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs';

export class YourComponent {
  sellEntries$: Observable<any[]>;
  displayedColumns: string[] = ['字段1', '字段2'];

  constructor(private db: AngularFireDatabase) {
    this.sellEntries$ = this.db.list('sellEntries').valueChanges();
  }
}

模板里用async管道直接解析Observable为数据数组：

<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="sellEntries$ | async">
    <!-- 列定义示例 -->
    <ng-container matColumnDef="字段1">
      <th mat-header-cell *matHeaderCellDef> 字段1名称 </th>
      <td mat-cell *matCellDef="let item"> {{item.字段1}} </td>
    </ng-container>

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

额外检查项 #

• 确认模块中已经导入MatTableModule（如果用到排序/分页还要导入MatSortModule/MatPaginatorModule）；
• 检查Firebase的sellEntries节点是否有数据，且字段名和模板中使用的完全一致；
• 查看浏览器控制台，确认有没有权限报错（Firebase规则是否允许读取sellEntries节点）。

内容的提问来源于stack exchange，提问作者Nutan Gwari