AngularFire2 перебирает массив объектов и получает данные из базы данных в реальном времени

Question

Мне нужно просмотреть массив товаров и получить цены в базе данных в реальном времени, но я хочу показать сообщение о загрузке при запуске, и после завершения загрузки я хочу удалить сообщение о загрузке, но так, как я это сделал, сообщение не работает, его удаляют до конца загрузки:

let loading = this.loadingCtrl.create({
  content: 'Waiting...'
});
loading.present();

for (let i = 0; i <= this.Cart.length - 1; i++) {
  let product = this.db.object('/menuItems/' + this.Cart[i].item.itemId);
  product.valueChanges().subscribe((prodData: any) => {
      if (prodData != null) {
          this.Cart[i].item.price = prodData.price[0]; 
      }
  });
}
loading.dismiss();

Как я могу сделать это правильно?

Answer 1

Вам необходимо скрыть индикатор загрузки внутри абонента. Самый простой способ - это скрыть его при поступлении первых данных:

for (let i = 0; i <= this.Cart.length - 1; i++) {
  let product = this.db.object('/menuItems/' + this.Cart[i].item.itemId);
  product.valueChanges().subscribe((prodData: any) => {
      if (prodData != null) {
          this.Cart[i].item.price = prodData.price[0]; 
      }
      loading.dismiss();
  });
}

Немного сложнее скрыть это после того, как все данные вернутся, но это не должно быть слишком сложно. Простой способ - подсчитать, сколько ответов вы получили. Как только это количество будет равно количеству товаров в корзине, вы можете скрыть индикатор загрузки.

var responseCount = 0;
for (let i = 0; i <= this.Cart.length - 1; i++) {
  let product = this.db.object('/menuItems/' + this.Cart[i].item.itemId);
  product.valueChanges().subscribe((prodData: any) => {
      if (prodData != null) {
          this.Cart[i].item.price = prodData.price[0]; 
      }
      if (responseCount++ == this.Cart.length) loading.dismiss();
  });
}