Angular 2 w/TypeScript Firebase API返回服務中的對象數組，但未在組件中定義

Question

我正嘗試在我的Angular 2應用程序中使用Firebase API。

以下是我在我的服務：

fbGetData() { 
     firebase.database().ref('/path/to/data').on('value',(snapshot) => { 
      this.data = snapshot.val(); 
      console.log(this.data); //This logs my data 
      return this.data; 
     }) 
    } 

這是我在我的組件：

ngOnInit() { 
     this.data = this.dataService.fbGetData(); 
     console.log(this.data); //This logs undefined 
    } 

的組件日誌不定，那麼該服務會記錄對象的數組。預先感謝您的幫助。

Answer 1

作爲@jonrsharpe評論：Firebase從其服務器異步檢索數據。您的瀏覽器不會等待此結果，因爲這會阻止用戶執行其他操作。所以你不能從fbGetData返回數據，因爲它尚未加載。

有兩種方式異步加載工作：

1. 使用回調
2. 回報承諾

使用回調

異步加載關鍵是要重構您的解決方案從「首先獲取數據，然後將其打印」轉換爲「每當數據加載時打印出來」。

在這段代碼轉換爲：

fbGetData() { 
    firebase.database().ref('/path/to/data').on('value',(snapshot) => { 
     this.data = snapshot.val(); 
     console.log(this.data); 
    }) 
} 

fbGetData(); 

所以記錄現在純粹是on()回調。

當然，你可能想要做的東西在不同時間的數據不同，所以你可以在回調中傳遞給fbGetData()：在這個階段

fbGetData(callback) { 
    firebase.database().ref('/path/to/data').on('value',(snapshot) => { 
     this.data = snapshot.val(); 
     callback(this.data); 
    }) 
} 

fbGetData(data => console.log(data)); 

當然，你應該考慮，如果你不應該」牛逼僅僅是一個快照調用您自己的回調：

fbGetData(callback) { 
    firebase.database().ref('/path/to/data').on('value',callback); 
} 

fbGetData(data => console.log(data.val())); 

回報承諾

在上面的例子中，數據將打印機d當它從服務器初始加載並且每當服務器上的數據發生變化時。這是Firebase數據庫魔術的一部分：它同步當前值和對該值的任何更改。

如果您只關心當前值，您還可以使用once()。此方法可以採取回調，但也可以返回承諾。這意味着，你有什麼事情，你可以從fbGetData返回：

fbGetData() { 
    var promise = firebase.database().ref('/path/to/data').once('value'); 
    return promise; 
} 

fbGetData().then(snapshot => console.log(snapshot.cal()); 

在這個片段中值將只被打（最多）一次，因爲你使用once()。

Answer 2

您可以嘗試訂閱方法來獲取數據。 Observable可以被訂閱，映射並且可以被轉換成JSON。

看看代碼，看看你能不能得到一些東西。

public sessions(): any { 
    return this.http.get('api/ResultsAPI')   //.get('api/vehicles.json') 
     .map(
     (response: Response) => <any>response.json()) 
     .do 
     (
     response => response 
     ); 
} 

調用該服務使用該

this.ApiService.sessions().subscribe(
data => { 
    this.api = data; 
    this.getdata(this.api); 
} 
);