ОШИБКА Ошибка: Uncaught (в обещании): TypeError: Невозможно прочитать свойство 'ключ' из неопределенного

Question

Я новичок в Angular. Я смотрю учебник Mo sh Hamedani, который находится в angular версии 4, но я использую более высокую версию. Я работаю над проектом электронной коммерции для кнопки AddToCart, где продукт должен увеличить свое количество, нажав кнопку и обновив его в Firebase с помощью productId, а также, если я попытаюсь добавить новый продукт, тогда идентификатор этого нового продукта должен быть добавлен в базу данных AngularFire. .

Все работает отлично, теперь я получаю сообщение об ошибке в файле shopping-cart.service.ts. Я получаю эту ошибку в консоли при попытке добавить товар в корзину. ОШИБКА Ошибка: Uncaught (в обещании): TypeError: Невозможно прочитать свойство 'ключ' из неопределенного. Ошибка в строке product.key Вот код.

product.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private db : AngularFireDatabase) { }

  create(product){
    return this.db.list('/products').push(product);
  }
  getAll(){
    return this.db.list('/products').snapshotChanges().pipe(
      map((products:any[])=>products.map(prod=>{
        const payload = prod.payload.val();
        const key = prod.key;
        return <any>{key,...payload};
      }))
    )
  }
  get(productId){
    return this.db.object('/products'+productId).valueChanges();
  }
  delete(productId){
    return this.db.object('/products'+productId).remove();
  }
}

shopping-cart.service.ts

async addToCart(product:Product){
    let cartId = await this.getOrCreateCartId();
    let item$:Observable<any> = this.db.object('/shopping-cart/' + cartId + '/items/' + product.key).valueChanges();
    let item$$ = this.db.object('/shopping-carts/' + cartId + '/items/' + product.key);
    item$.pipe(take(1)).subscribe(item=>{
      if(item===null){
        item$$.set({product:product,quantity:1});
        console.log("Adding new product to cart");
      }else{
        item$$.update({quantity:item.quantity+1});
        console.log("Updating the quantity")
      }
    });
  }

product.ts

export interface Product{
    key:string;
    title:string;
    price:number;
    category:string;
    imageUrl:string;
}

Answer 1

Скорее всего, ваш элемент $ не инициализирован в точке, где вы делаете элемент $ .pipe (take (1))