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遍历对象数组并从实时数据库获取数据

1 个答案: