使用angularfire2显示来自Firebase的数据

Question

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

我实现了一个记录患者，列出患者并在详细信息组件上访问每个患者的应用程序。该组件详细信息包含以下路线：路径：“ /患者/”：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将返回一个可观察的列表。 NgFor仅适用于列表，因此，令您惊讶的是，尝试使用可观察的对象而不是列表不会出现错误。考虑到这个想法，您的html应该改为

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