'in my product page.ts i call getcart() mathod in ngOnInIt from cartservice to print my items in console
**in my product page.ts i call getcart() mathod in ngOnInIt from cartservice to print my items in console but in console i get this error Cannot read properties of undefined (reading '-Mx97cGeRG4RNfKhdNTZ')
can anyone help with this please?**
this is my cartservice
@Injectable({ providedIn: 'root' }) export class CartService {
constructor(private db:AngularFireDatabase) { }
private create(){
return this.db.list('/shoppingcart').push({
datecreated:new Date().getTime()
})
}
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 getcart(){
let cartid= await this.getorcreatecartid();
return this.db.object('/shoppingcart/'+cartid)
}
private getitem(cartid:any,productid:any){
return this.db.object('/shoppingcart/'+cartid+'/items/'+productid);
}
async addtocart(product:any){
let cartid=await this.getorcreatecartid();
let item$=this.getitem(cartid,product.key)
item$.snapshotChanges().pipe(take(1)).subscribe((item:any)=>{
if(item.payload.exists()){
item$.update({quantity: item.payload.val().quantity+1})
}
else{
item$.update({
product:{
title:product.payload.val().title,
price:product.payload.val().price,
category:product.payload.val().category,
imageUrl:product.payload.val().imageUrl
},quantity:1
})
}
})
}
}
productcomponent
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit, OnDestroy {
products: any[] = []
filteredProducts: any[] = []
cart: any
category: any
subscribe: Subscription
constructor(private prodser: ProductserviceService, private catser: CategoryserviceService,
private acroute: ActivatedRoute, private cartser: CartService) {
this.subscribe = prodser.get().subscribe(products => {
this.products = products
this.acroute.queryParamMap.subscribe(params => {
this.category = params.get('category')
this.filteredProducts = (this.category) ? this.products.filter(p =>
p.payload.val().category === this.category
) : this.products
})
})
}
async ngOnInit(): Promise<void> {
(await this.cartser.getcart()).valueChanges().subscribe(cart => {
this.cart = cart
console.log(cart)
}
)
}
ngOnDestroy(): void {
this.subscribe.unsubscribe()
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
