Firebaseデータベースの結果にngForを使用するIonic2/Angular2 App

Question

ngForを使用してFirebaseのクエリ結果をストリーム/レンダリングするクリーンな方法は何ですか？私の理解では、非同期パイプを使用するngForはFirebaseのクエリ結果を自動的に変更することができます（オブザーバブルとして記述されている場合）。

次のコードでは、このエラーが発生します。オブジェクト 'type'のサポートオブジェクト '[object Object]が見つかりません。 NgForは、配列などのIterablesへのバインドのみをサポートしています。

オブザーバブルがオブジェクトの配列を返さないため、エラーが発生します。

テンプレート：

<div *ngFor="let wishlist of wishlists | async"> 
    <div>{{wishlist}}</div> 
</div> 

コンポーネント：

this.wishlists = 
    Observable.fromPromise(
     firebase.database().ref('wishlists').once('value') 
    ); 

以下にコンポーネントのコードを変更するには、少なくともレンダリングが、自動更新ストリームはありません。

this.wishlists = 
    new Promise((resolve, reject) => { 
     firebase.database().ref('wishlists/').on("value", function (snapshot) { 
     var wishlists = new Array(snapshot.numChildren()); 
     for (let data in snapshot) { 
      let data = snapshot.val(); 
      let wishlist = new Wishlist(snapshot.key); 
      wishlists.push(wishlist); 
     } 
     resolve(wishlists); 
    }); 

Observableを作成する必要がありますか。

return Observable.create(observer => { 
    let listener = ref.on('value', snapshot => { 
     let data = snapshot.val(); 
     let wishlist: Wishlist; 
     if (data != null) { 
      wishlist = new Wishlist(snapshot.key); 
     } 
     observer.next(wishlist); 
     // observer.complete(); // How do we know when complete or do we have to keep the stream open indefinitely? 
    }, observer.error); 
    return() => { 
     ref.off('value', listener); 
    } 
}); 

Answer 1

私は、これはこれを達成するための最良のの方法であることを知りませんが、私は同様の問題を抱えていたし、ちょうど配列としてFirebaseのスナップショットを保持する変数をキャスト入力します。 は、だからあなたの場合には、あなたのコードは、（あなたが望むクラスを定義したと仮定して）次のようになります（それは非同期パイプでは動作しませんが）、その後

ようなものでレンダリングする必要があります

wishLists: Array<Wish>; 
... 
this.wishLists = firebase.database().ref('wishlists').once('value'); 

<ion-header> 
    <ion-navbar> 
    <ion-title>Wishes</ion-title> 
    </ion-navbar> 
</ion-header> 


<ion-content> 
    <ion-list> 
    <ion-item *ngFor="let wish of wishLists"> 
     {{wish.name}} 
    </ion-item> 
    </ion-list> 
</ion-content>