As someone new to Angular, I've been following a tutorial by Mosh Hamedani on version 6 of Angular, but unfortunately the tutorial is based on version 4. Currently, I'm working on an e-commerce project that involves implementing an AddToCart button functionality where clicking the button should increase the quantity of the product and update it in Firebase using the productId. Furthermore, when adding a new product, the id of that product should also be added to AngularFire Database.
Everything was functioning smoothly until I encountered an error in the shopping-cart.service.ts file. The issue arises in the last line async addToCart(product: Product), with the error indicating that property pipe does not exist on type AngularFireObject.
Below is the code snippet:
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 });
});
}
}