Question

如标题所述，

在显示价格和数量方面存在问题。这是我到目前为止所做的：

购物车项目

 export class ShoppingCartItem {
  id?: string;
  name: string;
  imgCover: string;
  price: number;
  quantity: number;
}

shopping-cart.service

async getCart(): Promise<Observable<ShoppingCartItem[]>> {
  let cartId =  await this.getOrCreateCartId();
  let cartCollection = this.afs.collection(`shopping-carts/${cartId}/items`, ref => ref.where('id','==', cartId));
  return cartCollection.snapshotChanges().pipe(map( actions => {
    return actions.map(a => {
      const data = a.payload.doc.data() as ShoppingCartItem;
      const id = a.payload.doc.id;

      return { id, ...data };
    });
  })
);
}

navbar.component

  totalCart$: Observable<ShoppingCartItem[]>;
  items: ShoppingCartItem[]
  total: number = 0;

  constructor(
   public dialog: MatDialog,
   private shoppingCartService: ShoppingCartService,
  ) {}

  ngOnInit() {
    this.getCart();
  }

  async getCart() {
    this.totalCart$ = await this.shoppingCartService.getCart();

    this.totalCart$.subscribe(data => {
      data.forEach(element => {
       this.total += element.quantity

       console.log(this.total);
   })
  })
 }

使用这种方法，我可以在第一次加载时显示正确的数据，然后将该数量乘以相同数量+ 1（因为再次调用现有数据）即可。如何合并数量和价格字段？

更新：

购物车项目

 export class ShoppingCartItem {
   id?: string;
   name: string;
   imgCover: string;
   price: number;
   quantity: number;


constructor(param?: Partial<ShoppingCartItem>) {
  Object.assign(this, param);
 }

}

product-card.component

  items: ShoppingCartItem[];


constructor( 
  public adminProductService: AdminProductService, 
  private shoppingCartService: ShoppingCartService
) {}

ngOnInit() {
 this.getProducts();
 this.getCart()
}


async getQuantity(product: Product) {
  let itemsMap: { [productId: string]:  ShoppingCartItem};
  itemsMap = itemsMap || {};

  for (let productId in itemsMap) {
    let item = itemsMap[productId];
    this.items.push(new ShoppingCartItem ({
      ...item,
      id: productId,
    }));
  }

let item = itemsMap[product.id];
console.log(item.quantity);

return item ? item.quantity : 0;
}

在html中：

<div>{{ getQuantity(product)}} in Cart</div>

，并出现以下错误：

  Can't resolve all parameters for ShoppingCartItem: (?)..

更新2

  getQuantity(product: Product) {
   let itemsMap: { [productId: string]:  ShoppingCartItem}
   itemsMap = itemsMap || {}; //<--- this returns Cannot read property 'quantity' of undefined but when I comment out it returns ID of clicked item Cannot read property '592HNZP1z5KNFqHf2Pl5' of undefined

   for (let productId in itemsMap) {
     let item = itemsMap[productId];
     this.items.push(new ShoppingCartItem({
         ...item,
         id: productId,
     }));
    }
   let item = itemsMap[product.id];

  console.log(item.quantity);
  return item ? item.quantity : 0;

  }

Answer 1

为防止总数在以后的通话中增加一倍，只需添加一个局部变量即可将您的数量和价格相加。完成价格和数量的累加后，您可以为它们分配实际的类别字段，请参见以下示例：

totalCart$: Observable<ShoppingCartItem[]>;
items: ShoppingCartItem[]
totalQuantity: number = 0;
totalPrice: number = 0;

constructor(
  public dialog: MatDialog,
  private shoppingCartService: ShoppingCartService,
) { }

ngOnInit() {
  this.getCart();
}

async getCart() {
  this.totalCart$ = await this.shoppingCartService.getCart();

  this.totalCart$.subscribe(data => {
    let totalQuantity = 0;
    let totalPrice = 0;
    data.forEach(element => {
      totalQuantity += element.quantity
      totalPrice += element.quantity * element.price
      console.log(totalQuantity, totalPrice);
    })
    this.totalQuantity = totalQuantity;
    this.totalPrice = totalPrice;
  })
}

有没有一种合并凭证值的方法（购物车的总价格和数量）

1 个答案: