Angular 4显示从firebase到md-table的列表数据

Question

我正在尝试创建一个表，它将从firebase加载数据并显示在创建的表中。

这是我的组件HTML

<div fxLayout="row">
    <div>Dealers</div>
    <div>
        <md-form-field floatPlaceholder="never">
            <input mdInput #filter placeholder="Filter dealer">
        </md-form-field>
    </div>
    <div>
        <md-table #table [dataSource]="dataSource">
            <ng-container mdColumnDef="userId">
                <md-header-cell *mdHeaderCellDef> ID </md-header-cell>
                <md-cell *mdCellDef="let row"> {{row.id}} </md-cell>
            </ng-container>
            <ng-container mdColumnDef="email">
                <md-header-cell *mdHeaderCellDef> Email-Id </md-header-cell>
                <md-cell *mdCellDef="let row"> {{row.email}} </md-cell>
            </ng-container>

            <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
            <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
        </md-table>
    </div>
</div>

这是我的ts文件

import { Component, OnInit,ElementRef, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FirebaseApisService } from '../firebase-apis/firebase-apis.service';
import { FirebaseListObservable } from 'angularfire2/database';

import {DataSource} from '@angular/cdk/collections';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/fromEvent';


@Component({
  selector: 'app-season',
  templateUrl: './season.component.html',
  styleUrls: ['./season.component.css']
})
export class SeasonComponent implements OnInit {
 // season: FirebaseListObservable<any>;
  displayedColumns = ['name', 'mobile', 'email'];
  dataSource: DataSourceDealers | null;
  @ViewChild('filter') filter: ElementRef;
  constructor(private route: ActivatedRoute, private fireApi: FirebaseApisService) { }

  ngOnInit() {

    this.route.params.subscribe((param)=>{
      this.dataSource = new DataSourceDealers(this.fireApi,param);
      Observable.fromEvent(this.filter.nativeElement, 'keyup')
      .debounceTime(150)
      .distinctUntilChanged()
      .subscribe(() => {
        if (!this.dataSource) { return; }
        this.dataSource.filter = this.filter.nativeElement.value;
      });
    }) 
  }

}
export class DataSourceDealers extends DataSource<any> {
  _filterChange = new BehaviorSubject('');
  get filter(): string { return this._filterChange.value; }
  set filter(filter: string) { this._filterChange.next(filter); }
    season: FirebaseListObservable<any[]>;
    input: Observable<any>;
    dealers: any[] = [];
    constructor(private fireApi: FirebaseApisService,param) {
      super();
    }
    connect(): Observable<any> {
      this.season = this.fireApi.getDealers('/Dealers')
      this.season.subscribe(dealer => {
        this.dealers = dealer}
      );
// what to return here

    }
    disconnect() {}
  }

我没有得到什么返回，以便它将显示来自firebase列表的数据并显示数据，并且还能够根据经销商的名称进行搜索。

如何在材料m-table

中显示firebase列表数据