0

I'm trying to retrieve data from Angularfire : "^5.0.0-rc0" using a service, and want to return the result to the component using this service, and the component should print the result from firebase to html file.

I am facing issue due to async retrieval of data from firebase, although I am getting proper response in console but don't know how to get the data in my component's html file.

Please note : FirebaseObjectObservable<any[]>; won't work in current version of angularfire, following are my files :

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() {

      }

}
4

3 回答 3

0

您在组件中引用了不同的 myData 。当您收到服务中的数据时，它会被重新分配。让您的服务中的方法返回一个 observable 并在您的组件中订阅它。或者更好的是，在模板中使用异步管道。

于 2017-10-15T10:17:11.507 回答
0

怎么样：

导出类 ListCompFirebasrComponent 实现 OnInit { trips; 旅行：任何；构造函数（私人服务：TripDataService）{ this.trips = this.service.getData().subscribe(item => { console.log(item); }); 控制台.log(this.trips); } ngOnInit() { } }

这有帮助吗？

于 2017-10-16T11:01:39.360 回答
0

正如我之前提到的，我想在收到回复后立即在我的 html 页面上发布来自 firebase 的回复，感谢@toni 的帮助。我通过以下方式解决了它：

行程数据.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() ];
});
}
}

我的组件文件：

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() {
  }
}

最后是我的html 文件：

<div>
   <h4>Requested Trips</h4>
     <ul *ngFor="let trip of trip_detials">
       <li>
       {{ trip.destination }}
       </li>
    </ul>
</div>
于 2017-10-22T19:01:21.880 回答