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();
  });
}

AngularFire2 遍历对象数组并从实时数据库中获取数据

AngularFire2 iterate through array of objects and get data from realtime database

javascript

firebase

firebase-realtime-database

angularfire2