Angular2活字体はFirebase JSONは

Question

次FirebaseコードはJSONでの製品のリストを返すオブジェクトに変換しますか？

製品オブジェクトの配列。

products: Product[]; 

製品オブジェクト。

export class Product { 
    public id: string; 
    public name: string; 
} 

私は、マップを使用するAngular 2 http.getへの多くの参照を参照してください。 https://angular.io/docs/ts/latest/guide/server-communication.html#!#sts=More%20fun%20with%20Observables

getHeroes(): Observable<Hero[]> { 
    return this.http.get(this.heroesUrl) 
        .map(this.extractData) 
        .catch(this.handleError); 
    } 

しかし、私はこれを行うにはマップまたは他のいくつかのtypescriptです規則を使用する方法を理解していません。

Answer 1

あなたは一度にコールバックを登録することで、データを取得し、提供パラメータにvalメソッドを呼び出すことができます。

ref.once("value", (snap) => { 
    var data = snap.val(); 
}); 

は、詳細については、このドキュメントを参照してください。

• https://www.firebase.com/docs/web/guide/retrieving-data.html

Answer 2

次のコードは機能しますが、最適ではないと感じます。 get関数は、ngForにバインド可能なObservableな製品の配列を返します。 firebase once関数の使用に注意してください。これは実際にはデータスナップショットであり、データストリームではありません。

this.products = get(); 

テンプレート：

<div *ngFor="let product of products"> 
    <div>{{product?.id}}</div> 
</div> 

機能：

get(): Observable<Wishlist[]> { 

    return Observable.fromPromise(
     firebase.database().ref('products').once('value') 
    ).flatMap(snapshot => { 
     let objects = snapshot.val(); 
     let products: Array<Product> = new Array(); 
     for (let key in objects) { 
      let object = objects[key]; 
      let product: Product = new Product(key, object.name); 
      products.push(product); 
     } 
     return Observable.of(products); 
    }) 
}