使用angularfire2从Firebase显示数据

Question

I use angular cli, realdatabase of firebase and angularfire2.

I realize an application that records patients, lists them and gives access to each patient on a detail component. This component detail has for route: path: '/ patients /': id

Once on the detail component, I log diagnostics. The structure of my data is as follows:

I am now looking to display the diagnoses belonging to each patient in the detail component.

I tried this but no data appears. Thank you for your help

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

It looks to me like you need to unwrap the observable of diagnosticsToDisplay. Remember that angularfire will return an observable that is a list. NgFor only works on lists, and so I'm surprised you're not getting an error from trying to use an observable instead of a list. With this idea in mind your html instead should read

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