从AngularFire检索数据：“^ 5.0.0-rc0”使用服务组件的HTML文件

我试图从检索数据Angularfire：“^ 5.0.0-rc0”使用服务，并且想返回将结果传递给使用此服务的组件，并且组件应将firebase的结果打印到html文件。从AngularFire检索数据：“^ 5.0.0-rc0”使用服务组件的HTML文件

虽然我在控制台中得到了正确的响应，但不知道如何获取组件的html文件中的数据，但我正在面临因异步检索Firebase数据而引发的问题。

请注意：FirebaseObjectObservable<any[]>;不会angularfire的当前版本的工作，下面是我的文件：

跳闸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 。：

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

     } 

}

来源

2017-10-15 GauravA.

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

来源

2017-10-15 10:17:11 funkizer

你能告诉我如何？我是新的可观察和订阅功能，以及如何在模板中使用异步？这将是真正有帮助 –

文档有一个很好的例子：https://github.com/angular/angularfire2/blob/master/docs/rtdb/objects.md – funkizer

我喜欢做的东西像

Got {{ item.stuff }} here, async pipe handles subscribing and changeDetection triggering so I can use ChangeDetectionStrategy.OnPush!

– funkizer

如何：

export class ListCompFirebasrComponent implements OnInit {trips;旅行：任何;构造函数（私人服务：TripDataService）{this.trips = this.service.getData（）。subscribe（item => {console.log（item）;}）;的console.log（this.trips）; } ngOnInit（）{}}

这有帮助吗？

来源

2017-10-16 11:01:39 iamsiddique

正如我前面提到的那样，我希望在收到响应后尽快在我的html页面上发布firebase的响应，谢谢@toni的帮助。我解决它在以下方式：

跳闸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() ]; 
}); 
} 
}

我的组件文件：

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-22 19:01:21

从AngularFire检索数据：“^ 5.0.0-rc0”使用服务组件的HTML文件

回答

相关问题