Question

使用ngFor流式传输/渲染Firebase查询结果的简洁方法是什么？我的理解是，使用异步管道的ngFor可以自动呈现对Firebase查询结果的任何更改（如果写为可观察的）。

以下代码产生此错误：无法找到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays。

错误是有道理的，因为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);
    }
});

Answer 1

我不知道这是实现此目的的最佳方式，但我遇到了类似的问题，只需输入将Firebase快照保存为Array的变量。所以在你的情况下你的代码看起来像这样（假设你已经定义了一个愿望类）：

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>

在Ionic2 / Angular2 App中使用ngFor for Firebase数据库结果

1 个答案: