ERROR TypeError: Cannot read property '-LlWio7vFBuxfeviKdWa' of undefined

Question

I get this error when adding a product to a cart, eventually hosted in Firebase. I'm following this tutorial and I can't seem to understand what I'm missing; the object is created in firebase, but the error persists and I can't display the quantity of products in the cart...

The TS of the product component:´

    constructor(
    private productService: ProductService,
    private route: ActivatedRoute,
    private shoppingCartService: ShoppingCartService) {



    this.productService.getAll().subscribe(products => {
      this.products = products; 
      route.queryParamMap.subscribe(params => {
        this.category = params.get('category');

      });
    })
  }

      async ngOnInit() {
        this.subscription = (await this.shoppingCartService.getCart())
        .subscribe(cart =>{
          this.cart = cart;
          console.log(cart)
        })

      }



     addToCart(product: Product){
            this.cartService.addToCart(product);
            console.log(this.shoppingCart)
            let item = this.shoppingCart.item[this.product.$key];
            console.log(item)
          }

The HTML:

<button 
            (click)="addToCart(product)" 

            class="btn btn-primary btn-block">
            Add to cart
            </button>
            <div>{{getQuantity()}}</div>

And the service:

constructor(private db: AngularFireDatabase) { }

  private create() {
    return this.db.list('/shopping-cart').push({
      dateCreated: new Date().getTime()
    });
  }
async getCart(){
  let cartId = await this.getOrCreateCartId();
  return this.db.object('/shopping-cart/'+ cartId)
}

private getItem(cardId: string, productId: string){
  return this.db.object('/shopping-cart/' + cardId + '/items/' + productId);
}

  private async getOrCreateCartId(): Promise<string> {
    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();
    console.log(cartId)
    //get reference of product ID insinde the cart
    let item$= this.getItem(cartId, product.$key);
    item$.take(1).subscribe(item => {
      if (item.$exists()) item$.update({ quantity: item.quantity + 1 });
      else item$.set({ product: product, quantity: 1 })

    });
  }

If I use only the create method on the click event, I get no errors and the object with date time is created, but when submitting the product object Angular complains about the id of undefined...

EDIT : The key word $exist and quantity in the following line

if (item.$exists()) item$.update({ quantity: item.quantity + 1 });

gets reddish, but VC has no code suggestins

Answer 1

In your code you are taking in a product, but then you're referencing this.product.$key. Try product.$key instead.

addToCart(product: Product){
    this.cartService.addToCart(product);
    console.log(this.shoppingCart)
    let item = this.shoppingCart.item[product.$key];
    console.log(item)
}

Answer 2

async ngOnInit() {
    this.subscription = (await this.shoppingCartService.getCart())
        .valueChanges()
        .subscribe((cart) => (this.cart = cart));
}

Please write .valueChanges() I think it will work. If it doesn't work plz inform me.