Récupération de données à partir d'AngularFire: "^ 5.0.0-rc0" vers le fichier HTML du composant en utilisant le service

Question

J'essaie de récupérer des données de Angularfire: "^ 5.0.0-rc0" en utilisant un service, et que vous voulez retourner le résultat pour le composant utilisant ce service, et le composant doit imprimer le résultat depuis firebase vers le fichier html.

Je suis confronté à un problème en raison de la récupération asynchrone des données de Firebase, bien que j'obtienne une réponse correcte dans la console, mais je ne sais pas comment obtenir les données dans le fichier html de mon composant.

S'il vous plaît noter: FirebaseObjectObservable<any[]>; ne fonctionnera pas dans la version actuelle de angularfire, suivant mes fichiers:

trip-data.service.ts:

import { Injectable } from '@angular/core'; 
declare var firebase: any; 
import { Http, Response } from '@angular/http'; 
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database'; 
import { Observable} from 'rxjs/Observable'; 



@Injectable() 
export class TripDataService { 

finalItems; 
public data: Array<any> =[]; 
public myData: any[] =[]; 
    constructor(db: AngularFireDatabase) { 

    db.object('/').snapshotChanges().map(action => { 
      this.finalItems = { ...action.payload.val() }; 
      return this.finalItems; 
      }).subscribe(item => { 
      console.log(item); 
      this.myData = item; 
      console.log(this.myData); 
      } 
     ); 
    } 
} 

list.component .ts:

import { Component, OnInit } from '@angular/core'; 
import { TripDataService } from '../trip-data.service'; 
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database'; 
import { Observable} from 'rxjs/Observable'; 

@Component({ 
    selector: 'app-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'], 
    providers: [TripDataService] 
}) 
export class ListComponent implements OnInit { 
trips; 
     constructor(service: TripDataService) { 
      // this.trips = service(); 
      this.trips = service.myData; 
      console.log(this.trips); 
     } 

     ngOnInit() { 

     } 

} 

Answer 1

Vous référencez une myData différente dans le composant. Il est réaffecté lorsque vous recevez les données dans votre service. Avoir une méthode dans votre service retourner une observable à la place et vous abonner à celle de votre composant. Ou mieux encore, utilisez le tuyau async dans votre modèle.

Answer 2

Que diriez-vous:

classe export ListCompFirebasrComponent implémente OnInit {voyages; voyage: any; constructeur (service privé: TripDataService) {this.trips = this.service.getData(). subscribe (item => {console.log (item);}); console.log (this.trips); } ngOnInit() {}}

Cela aide-t-il?

Answer 3

Comme je l'ai mentionné plus tôt, que je voulais poster la réponse de Firebase sur ma page html dès que la réponse a été reçue, Merci @toni pour l'aide. Je l'ai résolu de la manière suivante:

trip-data.service.ts

import { Injectable, OnChanges, Input, SimpleChanges } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { AngularFireDatabase, AngularFireObject, AngularFireAction } from 'angularfire2/database'; 
import { Observable} from 'rxjs/Observable'; 
declare var firebase: any; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Subscription } from 'rxjs/Subscription'; 
import 'rxjs/add/operator/switchMap'; 



@Injectable() 
export class TripDataService { 

finalItems:any; 
public data: Array<any> =[]; 
public myData: any[] =[]; 

constructor(db : AngularFireDatabase) {  
this.finalItems = db.object('/').snapshotChanges().map(action => { 
    return [ ...action.payload.val() ]; 
}); 
} 
} 

mon fichier composant:

import { Component, OnInit } from '@angular/core'; 
import { TripDataService } from '../trip-data.service'; 
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database'; 
import { Observable} from 'rxjs/Observable'; 

@Component({ 
    selector: 'app-list-comp-firebasr', 
    templateUrl: './list-comp-firebasr.component.html', 
    styleUrls: ['./list-comp-firebasr.component.css'], 
    providers: [TripDataService] 
}) 
export class ListCompFirebasrComponent implements OnInit { 
trip_details; 
responseArray; 

    constructor(service: TripDataService) { 
    service.finalItems.subscribe(item => { 
      this.trip_details= item.filter(function(obj){ 
       return obj.trip_type == "Requested"; 
      });  
    }); 
    } 

    ngOnInit() { 
    } 
} 

Et enfin mon dossier html:

<div> 
    <h4>Requested Trips</h4> 
    <ul *ngFor="let trip of trip_detials"> 
     <li> 
     {{ trip.destination }} 
     </li> 
    </ul> 
</div>