顯示實時數據（）到HTML中使用角4

Question

我使用火力地堡的實時數據庫爲獲得在角4項目我的數據，下面是我的文件：

行程數據.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() { 

     } 

} 

和我得到適當的結果對象來自firebase的控制檯，一旦我從Firebase獲取數據，應該如何在我的html文件中顯示相同的數據，並且一旦在Firebase數據庫中更新數據，就應該在HTML頁面上更新相同的數據？

Answer 1

問題是myData變量是Array，它是默認的[]。 數組是參考類型。所以在你的組件中當你編寫this.trips = service.myData;時你的this.trips變量會被存儲引用到那個初始的空數組中。比你收到的數據在this.myData時會存儲引用新的數組。

的解決方案是使用下一個代碼，例如（如果在訂閱項是陣列）：

this.myData.length = 0; // clear array 
this.myData.splice(0, 0, ...item); 

Answer 2

跳閘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) { 

    } 

    returnData(){ 
     return this.db.object('/'); 
    } 
} 

列表.component.ts：

import { Component, OnInit } from '@angular/core'; 
import { TripDataService } from '../trip-data.service'; 
import { AngularFireDatabase, AngularFireObject, FirebaseObjectObservable } 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 : FirebaseObjectObservable<any[]>; 

    constructor(service: TripDataService) { 
      // this.trips = service(); 
      this.trips = service.returnData(); 
      console.log(this.trips); 
     } 

    ngOnInit() { 

    } 

} 

模板文件：

<h2>{{(trips | async)?.name}}</h2> 
<p>{{(trips | async)?.department}}</p>