错误错误：未捕获（承诺）：类型错误：无法读取未定义的属性“key”

Question

I'm a beginner to Angular. I'm watching the tutorial of Mosh Hamedani which is in angular version 4 but I am using higher version. 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. I am getting this error in the console while trying to add a product to cart ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'key' of undefined. I error is in line product.key Here is the code.

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

很可能您的 item$ 在您执行 item$.pipe(take(1)) 时未初始化