我想用Angularfire2来计算Firebase中ShoppingCart的总和 [英] I want to calculate the sum of the ShoppingCart at Firebase with Angularfire2

问题描述

我正在构建一个使用Angular2，Firebase和AngularFire2的实验性应用程序。
这就是我的数据：

$
$ Shopping $ $ $ $ $
item1：{
quantity：2，
productId：abc
}，
item2：{
数量：1，
productId：bcd
}
}
产品
{
abc：{
name：product1，
price：5
}，
bcd：{
name：product2，
价格：6
}
}
}

以下是我的cart.ts

  this.items = this.af.database.list（'ShoppingCartItem'）
 .map （carts => {
 return carts.map（item => {
 item.product = this.af.database.object（`Product / $ {item.productId}`）; 
退货项目; 
}）; 
}）; 
  

以下是我的cart.html

 <表> 
< tbody> 
< tr * ngFor =let item of（items | async）> 
< td> {{（item.product | async）?. name}}< / td> 
< td>< input type =textname =quantity[（ngModel）] =item.quantitysize =1class =form-control>< / td> ; 
< td> {{（item.product | async）?. price |号码：'.2'}}< / td> 
< td> {{（item.product | async）?. price * item.quantity |号码：'.2'}}< / td> 
< / tr> 
< / tbody> 
< tfoot> 
< tr> 
< td colspan =2class =text-right> 
< strong>总计：< / strong> 
< / td> 
< td colspan =2class =text-left> 
 ????????? 
< / td> 
< / tr> 
< / tfoot> 
  

我想计算ShoppingCart的总和。所以我想找到数据显示的（2 * 5）+（1 * 6）= 16的值。我该怎么做。

这个 plunker

解决方案

问题出在这段代码中：

  carts.map（cart => {
 this.af.database.object（`Product / $ {cart.productId}`）
 .subscribe（d => {
 cart.product = d; 
}）; 
返回购物车; 
}）; 
 carts.forEach（cartItem => {
 qty + = cartItem.quantity; 
 total + = cartItem.quantity * cartItem.product.price; 
 // console.log （cartItem）; 
}）; 
  

两个调用： carts.map 和 carts.forEach 是同步的，并且一个接一个地发生。但是加载产品（通过 af.database.object ）是异步的，所以当你迭代cartItem产品的时候还没有加载。

解决方案是连锁产品加载和总计算。请参阅此处。

I'm building an experimental application that uses Angular2, Firebase and AngularFire2. This is what my data looks like:

{
  "ShoppingCartItem":
      {
        "item1":{
            "quantity": 2,
            "productId": "abc"
        },
        "item2":{
            "quantity": 1,
            "productId": "bcd"
        }
      }
  "Product"
      {
        "abc":{
            "name": "product1",
            "price": 5
    },
        "bcd":{
            "name": "product2",
            "price": 6
        }
    }
}

Below are my cart.ts

this.items = this.af.database.list('ShoppingCartItem')
          .map(carts => {
            return carts.map(item => {
              item.product = this.af.database.object(`Product/${item.productId}`);
              return item;
            });
          });

Below are my cart.html

<table>
<tbody>
    <tr *ngFor="let item of (items | async)">
        <td>{{(item.product | async)?.name}}</td>
        <td><input type="text" name="quantity" [(ngModel)]="item.quantity" size="1" class="form-control"></td>
        <td>{{(item.product | async)?.price | number: '.2'}}</td>
        <td>{{(item.product | async)?.price * item.quantity | number: '.2'}}</td>
    </tr>
</tbody>
<tfoot>
    <tr>
      <td colspan="2" class="text-right">
        <strong>Total :</strong>
      </td>
      <td colspan="2" class="text-left">
        ?????????
      </td>
    </tr>
</tfoot>

I want to calculate the sum of the ShoppingCart. So I want to find the value of (2*5) + (1*6) = 16 as the data shows. How do i do it.

This plunker

解决方案

The problem is in this code:

carts.map(cart => {
    this.af.database.object(`Product/${cart.productId}`)
    .subscribe(d => {
        cart.product = d;
    });
  return cart;
});
carts.forEach(cartItem => {
    qty += cartItem.quantity;
    total += cartItem.quantity * cartItem.product.price;
    // console.log(cartItem);
});

Two calls: carts.map and carts.forEach are synchronous and happen one after another. But loading of products (via af.database.object) is asynchronous so when you iterating over cartItem products not been loaded yet.

The solution would be to chain product loading and total calculation. See here.

这篇关于我想用Angularfire2来计算Firebase中ShoppingCart的总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！