Vfrdtyky

I'm a beginner to Angular. I'm watching the tutorial of Mosh Hamedani using the Angular version 6 but the problem is the tutorial version is 4. I'm working on the e-commerce project on AddToCart button where the product should increase it's quantity by clicking the button and updated in Firebase using productId and also if I try to add new product then id of that new product should add in AngularFire Database.

Everything is working perfectly now I'm getting error in shopping-cart.service.ts file. The error is in the last line async addToCart(product: Product) where the error shows property pipe doesn't exist on type AngularFireObject.

Here is the code.

shopping-cart.service.ts

import { Injectable } from '@angular/core';

import { AngularFireDatabase } from '@angular/fire/database';

import { Product } from '../models/products';

import { take } from 'rxjs/operators';



@Injectable({

  providedIn: 'root'

})



export class ShoppingCartService {

   constructor(private db: AngularFireDatabase) { }



private create(){

    return this.db.list('/shopping-carts').push({

        dateCreated: new Date().getTime()

    })

}



private getCart(cartId: String){

    return this.db.object('/shopping-carts/' + cartId);

}



private getItem(cartId: string, productId: string){

    return this.db.object('/shopping-carts/' + cartId + '/items/' + productId);

}



private async getOrCreateCartId(){

    let cartId = localStorage.getItem('cartId');

     if(cartId) return cartId;



    let result = await this.create();

    localStorage.setItem('cartId', result.key);

    return result.key;

}



async addToCart(product: Product){

    let cartId = await this.getOrCreateCartId();

    let item$ = this.getItem(cartId, product.key);

    item$.pipe(take(1)).subscribe(item => {

        item$.update({ product: product, quantity:(item.quantity || 0) + 1 });

    });

}

}

the problem here is that your this.getItem() method isn't returning an Observable, instead it returns AngularFireObject, which hasn't pipe property, so you should call valuChanges method which will return an Observable

private getItem(cartId: string, productId: string){

    return this.db.object('/shopping-carts/' + cartId + '/items/' + productId).valueChanges();

}



async addToCart(product: Product){

    let cartId = await this.getOrCreateCartId();

    let item$ = this.getItem(cartId, product.key);

    item$.pipe(take(1)).subscribe(item => {

        item$.update({ product: product, quantity:(item.quantity || 0) + 1 });

    });

}

maybe instead of changing this line to
return this.db.object('/shopping-carts/' + cartId + '/items/' + productId).valueChanges();

leave it as it was
return this.db.object('/shopping-carts/' + cartId + '/items/' + productId)
then in the function you are calling the getItem function before subscribing to it you can add value changes there
should be something like

`private getItem(cartId: string, productId: string){

        return this.db.object('/shopping-carts/' + cartId + '/items/' + productId);

    }

 async addToCart(product: Product){

        let cartId = await this.getOrCreateCartId();

        let item$ = this.getItem(cartId, product.key).valueChanges();

        item$.pipe(take(1)).subscribe(item => {

            item$.update({ product: product, quantity:(item.quantity || 0) + 1 });

        });

    }`