Angular2打字稿转换火力地堡JSON到对象

问题描述：

下面的火力地堡的代码返回的产品在JSON列表：Angular2打字稿转换火力地堡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); 
    }

但我不知道如何使用地图或其他一些打字稿惯例做到这一点。

什么是 “产品清单” 是什么样子？ – Chrillewoodz

已更新的问题，以澄清产品对象的数组/列表可能看起来像什么。 –

...刚刚在这里找到了答案：http://*.com/a/41752653/7467098 –

答

您可以通过一次就注册一个回调获取数据，并调用val方法所提供的参数：

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

看到这个文档获取更多详情：

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

了解，但这个json如何映射到一个对象？ –

答

以下代码有效，但感觉不够优化。 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); 
    }) 
}

Angular2打字稿转换火力地堡JSON到对象

相关推荐