Есть ли способ объединить значения документа (общая стоимость и количество в корзине)

Question

, как говорит заголовок, есть проблема с отображением цены и количества. Вот что я сделал до сих пор:

корзины покупок товара

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

Торгово-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);
 }

}

продукт-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;
  })
}