如何在等待我请求的所有 Firebase 数据完全完成时显示加载状态？答案

【问题标题】：How to show loading state while waiting all my Firebase data requested completely done?如何在等待我请求的所有 Firebase 数据完全完成时显示加载状态？
【发布时间】：2017-06-20 12:35:24
【问题描述】：

星期五快乐！我只是想要任何关于如何显示加载的建议，如下所示：

在等待 Firebase 数据完全加载时。

我尝试使用

<div *ngIf="!listOfFoodObject">
   <img [src]="https://i.stack.imgur.com/7luvR.gif" />
</div>

但仍然没有成功。谁能帮帮我？

我当前在控制器中的 Firebase 代码：

firebase.database().ref('menu_name').orderByChild('menu_name').once('value',(snapshot)=>{
    snapshot.forEach((snap)=>{
        this.listOfFoodObject.push({
            key: snap.key,
            menu_name:String(snap.val().menu_name).toUpperCase(),
            menu_image:snap.val().menu_image,
            description:snap.val().description
        });
    return false;
    });

});

还有我的<ion-list> 观点：

<ion-list>
    <ion-item *ngFor="let food of listOfFoodObject">
        <ion-thumbnail item-left (click)="show_item_details(food.menu_name,food.key,food.menu_image,food.description)">
            <img src="{{food.menu_image}}">
        </ion-thumbnail>
        <h2 (click)="show_item_details(food.menu_name,food.key,food.menu_image,food.description)">{{food.menu_name}}</h2>
        <p (click)="show_item_details(food.menu_name,food.key,food.menu_image,food.description)">{{food.description}}</p>
        <p>
            <ion-icon ios="ios-star" md="md-star"></ion-icon>
            3.8
        </p>
        <button ion-button round item-right (click)="show_item_details(food.menu_name,food.key,food.menu_image,food.description)">View sellers</button>
    </ion-item>
</ion-list>

谢谢！

【问题讨论】：

您是否尝试过使用承诺并等待解决，而在未解决时使用“等待”图像？
其实任何ajax方法都可以；将“等待图标”放在活动的 html 元素中，并在 ajax 调用成功时将属性 display 设置为 none
承诺并等待我不知道如何使用它（^_^）。你能给我一个示例代码吗？
那么，它解决了您的问题吗？ :)

标签： angular typescript ionic2 loading

【解决方案1】：

var firebasePromise = new Promise(function(resolve, reject) {

    // Do your database tasks, request data

    if(data was returned) {
        resolve(here you return your data);
    }
    else {
        reject(here you throw an error);
    }
});

firebasePromise.then(function() { 
    // this part deals with the resolved promise
    // so you can use your data here
}).catch(function() {
    // in here you handle your error that was returned by reject
})

上面这个是一个promise的基本例子，它是一个规范AJAX请求的规范，如果你使用nodejs、angularjs或其他库，可能有内置的promise可以使用，如果没有，你可以查找延迟对象，这几乎是一个承诺实现。

您做出承诺 (firebasePromise)，该承诺可以被解决（您的数据以异步方式成功返回）或被拒绝。 firebasePromise 在后台启动并工作，完成后它会触发 then 方法，它使您能够对返回的值进行操作，解决或拒绝。这是一个过度简化，但您可以了解它的要点。

【讨论】：

好的，谢谢，我先试试。稍后我会提供反馈。

【解决方案2】：

根据您的 Firebase 代码，您可能已将 listOfFoodObject 初始化为空数组

listOfFoodObject =[];

但空数组是“真实”值，这就是为什么在您的以下 HTML 代码中 *ngIf 条件被错误且图像未显示的原因：

<div *ngIf="!listOfFoodObject">
   <img [src]="https://i.stack.imgur.com/7luvR.gif" />
</div>

您应该在 forEach 循环之前将 listOfFoodObject 初始化为空数组。

【讨论】：

【解决方案3】：

如上所述，使用承诺。

使用发布的代码 mnemosdev，你会没事的。

但这是你在做什么的问题，你是否在显示加载 gif 时隐藏了页面的其余内容？因为用户可以点击页面中的任何内容，甚至没有响应就返回，这是糟糕的用户体验。

创建一个自定义组件like this，因此当您要请求某些内容时，您调用一个显示加载的方法（没有 *ngIf 内容），当您结束它时，无论是否有数据，您调用的方法隐藏加载。

这是对您问题的有效回答，但只是认为您应该知道。

【讨论】：