Как показать состояние загрузки, ожидая, что все данные моей Firebase запрошены полностью?

Question

С праздником пятницы! Я просто хочу какие-либо советы о том, как показать нагрузку, как показано ниже:

во время ожидания 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> 

Спасибо!

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

Это одна выше, является основным примером обещания, которая является спецификацией стандартизировать запрос AJAX, если вы используете nodejs, angularjs или другие библиотеки есть, вероятно, встроенные обещания, которые вы можете использовать, если нет, вы можете искать отложенный объект, что в значительной степени является воплощением обещаний.

Вы выполняете обещание (firebasePromise), и обещание может быть разрешено (ваши данные успешно возвращены асинхронным образом) или отклонено. firebasePromise запускается и работает в фоновом режиме, и когда это делается, он запускает метод then, и он позволяет выполнять операции с возвращаемыми значениями, разрешать или отклонять. Это чрезмерное применение, но вы можете понять суть этого.

Answer 2

на основе кода Firebase, Вы можете быть инициализирован listOfFoodObject, как пустой массив

listOfFoodObject =[]; 

Но пустой массив «truthy» значение, и именно поэтому в вашем следующем HTML код * состояние ngIf становится falsed и изображения не получает отображается:

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

Вы должны инициализировать listOfFoodObject, как пустой массив непосредственно перед forEach цикла.

Answer 3

Как указано выше, используйте обещания.

Использовать код mnemosdev, и все будет в порядке.

Но вот улов на том, что вы делаете, скрываете ли вы остальную часть содержимого страницы, показывая загрузочный gif? Поскольку пользователь может нажать на что-либо на странице и даже вернуться без ответа, это плохо UX.

Создайте пользовательский компонент like this, поэтому, когда вы собираетесь запросить что-то, вы вызываете метод, который представляет loding (без материала * ngIf), и когда вы закончите его, имея данные или нет, вы вызываете метод, который скрывает погрузка.

Это недействительный ответ на ваш вопрос, но просто подумал, что вы должны знать.