使用ngFor for Firebase數據庫結果在Ionic2/Angular2應用程序

使用ngFor來流式處理/呈現Firebase查詢結果的乾淨方式是什麼？我的理解是，ngFor使用異步管道可以自動對Firebase查詢結果進行任何更改（如果以可觀察方式編寫）。使用ngFor for Firebase數據庫結果在Ionic2/Angular2應用程序

以下代碼會產生此錯誤：找不到類型爲'object'的不同支持對象'[object Object]'。 NgFor僅支持綁定到陣列等陣元。

錯誤很有意義，因爲observable不返回對象數組。

模板：

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

來源

2016-08-12 Aydus-Matthew

我不知道，這是實現這一目標的最佳方式，但我也有類似的問題，只是類型轉換的變量保持火力地堡快照的陣列。所以你的情況你的代碼應該是這樣的（假設你已經定義了一個願望類）：

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>

來源

2016-09-17 13:05:59 Yon

沒有'| | async'？ – ewizard

使用ngFor for Firebase數據庫結果在Ionic2/Angular2應用程序

回答

相關問題