Angular 角材料6-来自维修的垫表数据

我希望将服务中的数据集成到角度材质表中

---

我看到的所有示例都引用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 ();
 }

    <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>

服务

    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);
            }
          );
         }
     );
     }

从'@angular/core'导入{Injectable}；
从'rxjs/Subject'导入{Subject}；
从“../models/Patient.model”导入{Patient}；
从“firebase”导入*作为firebase；
导入DataSnapshot=firebase.database.DataSnapshot；
从“rxjs”导入{observeable}；
@可注射（）
导出类病人服务{
患者：患者[]=[]；
patientsSubject=新主题（）；
(){
this.patientsSubject.next（this.patients）；
}
拯救病人（）{
firebase.database（）.ref（'/patients'）.set（this.patients）；
}
获取患者（）{
firebase.database（）.ref（“/patients”）
.on（'值'，（数据：DataSnapshot）=>{
this.patients=data.val（）？data.val（）：[]；
这是一个病人（）；
}
);
}
getSinglePatient（id:编号）{
在此输入代码并返回新承诺(
（解决、拒绝）=>{
firebase.database（）.ref（'/patients/'+id）。一次（'value'）。然后(
（数据：DataSnapshot）=>{
解析（data.val（））；
}，（错误）=>{
拒绝（错误）；
}
);
}
);
}

---

我没有看到关于这个问题的其他帖子。

在我的服务中，我有：

   getPatients(): Observable<Patient[]> {

   firebase.database().ref('/patients')
   .on('value', (data: DataSnapshot) => { this.patients = (data&&data.val()) 
   ? data.val() : this.patients} );
   return of(this.patients);
   }

---

一个observable不能订阅类型void，你的firebase连接应该有问题，重新检查一下。检查这个-我的firebase连接正常，因为我可以在卡片上显示我的患者。我想这是材料代码-表。Thks Dhiraj Ray，我会去看看哦verry beautiful Abr001am，我如何在我的应用程序中使用你的解决方案？

   getPatients(): Observable<Patient[]> {

   firebase.database().ref('/patients')
   .on('value', (data: DataSnapshot) => { this.patients = (data&&data.val()) 
   ? data.val() : this.patients} );
   return of(this.patients);
   }

 ngOnInit() { 

 this.patientsService.emitPatients();
 this.patientsSubscription = 
 this.patientsService.patientsSubject.subscribe((patients: Patient[]) => 
 {this.patients = patients;});
 this.patientsService.getPatients().subscribe(data => 
 {console.log(this.patientsService.patients[0]); this.dataSource.data = 
 data;});