在 Ionic2/Angular2 应用程序中使用 ngFor 获取 Firebase 数据库结果

Posted 2023-03-13

【中文标题】在 Ionic2/Angular2 应用程序中使用 ngFor 获取 Firebase 数据库结果

【英文标题】：Use ngFor for Firebase Database Results in Ionic2/Angular2 App

【发布时间】：2016-12-19 00:00:02

【问题描述】：

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

以下代码产生此错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

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

【参考方案1】：

我不知道这是实现此目的的最佳方法，但我遇到了类似的问题，只需将保存 Firebase 快照的变量键入为数组即可。 因此，在您的情况下，您的代码将如下所示（假设您已经定义了一个 Wish 类）：

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>

【讨论】：

没有| async？