Angular2 Typescript將Firebase JSON轉換為Object

Question

以下Firebase代碼返回json中的產品列表：

firebase.database().ref('/products/').once('value');

在Angular2中，將這個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);
  }

但我不明白如何使用map或其他一些打字稿約定來做到這一點。

Answer 1

以下代碼有效，但感覺次優。 get函數返回一個可以綁定到ngFor的Observable產品數組。 請注意使用Firebase一次功能。 這實際上是數據快照而不是數據流。

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);
    })
}

Answer 2

您可以通過一次注冊回調來獲取數據，並在提供的參數上調用val方法：

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

有關詳細信息，請參閱此文檔：

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