使用 angularfire2 显示来自 firebase 的数据

Question

我使用 angular cli，firebase 的 realdatabase 和 angularfire2。

我实现了一个应用程序，该应用程序记录患者、列出他们并允许访问详细信息组件上的每个患者。此组件详细信息具有路线：路径：'/ patients /'：id

在详细信息组件上，我记录诊断。我的数据结构如下：

我现在希望在详细信息组件中显示属于每个患者的诊断。

我试过了，但没有数据出现。感谢您的帮助

//diagnosticsService.ts :

import { Injectable } from '@angular/core';
import { Patient } from '../models/patient.model';
import { Diagnostic } from '../models/diagnostic.model';
import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';

@Injectable()

export class DiagnosticsService {
diagnostics: AngularFireList<any>;

constructor(private database: AngularFireDatabase) {this.diagnostics = database.list('diagnostics');}

getDiagnostics() { return this.diagnostics; }

CreateDiagnostic(newDiagnostic: Diagnostic) { this.diagnostics.push(newDiagnostic); }

getDiagnosticByPatientid(Patientid: string){
return this.database.list('/diagnostics', ref => ref.orderByChild("Patientid").equalTo(Patientid)).valueChanges();
}

//ComponentDetail.ts :

import { Component, OnInit, Inject } from '@angular/core';
import { Patient } from '../../models/patient.model';
import { Diagnostic } from '../../models/diagnostic.model';
import { ActivatedRoute, Router } from '@angular/router';
import { PatientsService } from '../../services/patients.service';
import { DiagnosticsService } from '../../services/diagnostics.service';
import { AngularFireDatabase, AngularFireList, AngularFireObject, AngularFireAction } from 'angularfire2/database';
import { Location } from '@angular/common';
import { Observable } from 'rxjs/Observable';

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

export class SinglePatientComponent implements OnInit {

  patientId: string;
  diagnosticToDisplay;

    constructor( 
    private route: ActivatedRoute, 
    private location: Location,
    private patientsService: PatientsService,
    private diagnosticsService: DiagnosticsService,
    private router: Router, 

    ) {}

  ngOnInit() {
   this.route.params.forEach((urlParameters) => {
   this.patientId = urlParameters['id'];
   this.diagnosticToDisplay = 
   this.diagnosticsService.getDiagnosticByPatientid(this.patientId);
   console.log(this.diagnosticToDisplay);
}

//DetailComponent.html :

<li *ngFor="let diagnosticToDisplay  of diagnosticsToDisplay | async ">
      {{ diagnosticToDisplay?.localisation }}
</li>

Answer 1

在我看来，您需要解包 diagnosticsToDisplay 的可观察对象。请记住，angularfire 将 return 一个作为列表的可观察对象。 NgFor 仅适用于列表，因此我很惊讶您在尝试使用可观察对象而不是列表时没有收到错误。考虑到这个想法，您的 html 应该改为

<li *ngFor="let diagnosticToDisplay  of diagnosticsToDisplay | async ">
  {{ diagnosticToDisplay?.localisation }</li>

使用 angularfire2 显示来自 firebase 的数据

Display Data from firebase with angularfire2

firebase

firebase-realtime-database

ngfor

angularfire2

angular