Angular2 Машинопись Преобразование Firebase JSON в объект

Question

Следующая Firebase код возвращает список товаров в формате JSON:

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

В Angular2, что это лучший способ, чтобы преобразовать это в JSON массив объектов продукции?

например. Массив объектов продукта.

products: Product[]; 

e.g. Объект продукта.

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

Но я не понимаю, как использовать карту или какой-либо другой машинопись конвенции, чтобы сделать это.

Answer 1

Вы можете получить данные по регистрации обратного вызова на один раз и вызвать метод val на поставленный параметре:

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

Смотрите этот документ для более подробной информации:

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

Answer 2

Следующий код работает, но чувствует себя не оптимальным. Функция get возвращает массив Observable, который может быть привязан к ngFor. Обратите внимание на использование функции 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); 
    }) 
}