Угловой материал 6 - мат-стол Данные из сервиса

Я хочу интегрировать данные из службы в угловую таблицу материалов.

Все примеры, которые я мог видеть, относятся к жестким данным в файле ts, но не относятся к службе.

Мой сервис позволяет восстанавливать всех моих пациентов, функционально с бутстрапом, но когда я хочу интегрировать его с угловым материалом, я не могу этого сделать.

Кто-нибудь знает решение?

Component.ts

import { Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import { PatientsService } from '../services/patients.service';
import { Patient } from '../models/patient.model';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/observable';
import { Router } from '@angular/router';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';

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

export class PatientListComponent implements OnInit {

displayedColumns = ['prenom', 'nom', 'sexe', 'daten'];
dataSource = new MatTableDataSource<Patient>();

patients: Patient[];
patientsSubscription: Subscription;

constructor(private patientsService: PatientsService, private router: Router) 
{}

ngOnInit() {

 this.patientsService.getPatients().subscribe(
  data => {
    this.dataSource.data = data;
  }
);

 this.patientsService.emitPatients();
 }

 onNewPatient() {
 this.router.navigate(['/patients', 'new']);
 }

 onDeletePatient(patient: Patient) {
 this.patientsService.removePatient(patient);
 }

 onViewPatient(id: number) {
 this.router.navigate(['/patients', 'view', id]);
 }

 ngOnDestroy() {
 this.patientsSubscription.unsubscribe();
  }
 }

 export interface Element {
 prenom: string;
 nom : string;
 sexe: string;
 daten: new Date ();
 }

Component.ts

    <div >
    <table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8">


   <ng-container matColumnDef = "prenom">
   <th mat-header-cell *matHeaderCellDef> Prénom </th>
   <td mat-cell *matCellDef = "let element"> {{element.prenom}} </td>
   </ng-container>


   <ng-container matColumnDef = "nom">
   <th mat-header-cell *matHeaderCellDef> Nom de naissance </th>
   <td mat-cell *matCellDef = "let element">  {{element.nom}}</td>
   </ng-container>


   <ng-container matColumnDef = "daten">
   <th mat-header-cell *matHeaderCellDef> Date de naissance </th>
   <td mat-cell *matCellDef = "let element">  {{element.daten}} </td>
   </ng-container>


   <ng-container matColumnDef = "sexe">
   <th mat-header-cell *matHeaderCellDef> Sexe </th>
   <td mat-cell *matCellDef = "let element">  {{element.sexe}} </td>
   </ng-container>

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

Модель

    export class Patient 
    {
    photo: string;
    constructor(public nom: string, public prenom: string, public sexe: 
    string, public daten = new Date ()) {}
    }

Услуга

    import { Injectable } from '@angular/core';
    import { Subject } from 'rxjs/Subject';
    import { Patient } from '../models/patient.model';
    import * as firebase from 'firebase';
    import DataSnapshot = firebase.database.DataSnapshot;
    import {Observable} from "rxjs";

    @Injectable()
    export class PatientsService {

    patients: Patient[] = [];
    patientsSubject = new Subject<Patient[]>();

    emitPatients() {
    this.patientsSubject.next(this.patients);
    }

         savePatients() {
         firebase.database().ref('/patients').set(this.patients);
         }

         getPatients() {
         firebase.database().ref('/patients')
         .on('value', (data: DataSnapshot) => {
         this.patients = data.val() ? data.val() : [];
         this.emitPatients();
         }
         );
         }

        getSinglePatient(id: number) {
        enter code herereturn new Promise(
          (resolve, reject) => {
            firebase.database().ref('/patients/' + id).once('value').then(
             (data: DataSnapshot) => {
              resolve(data.val());
            }, (error) => {
              reject(error);
            }
          );
         }
     );
     }

Я не вижу других сообщений по этой проблеме.