錯誤錯誤：未捕獲（承諾）：類型錯誤：無法讀取未定義的屬性“key”

Question

我是 Angular 的初學者。 我正在觀看 angular 版本 4 中的 Mosh Hamedani 教程，但我使用的是更高版本。 我正在處理 AddToCart 按鈕上的電子商務項目，其中產品應該通過單擊按鈕來增加數量並使用 productId 在 Firebase 中更新，如果我嘗試添加新產品，那么該新產品的 id 應該添加到 AngularFire 數據庫中.

現在一切正常，我在 shopping-cart.service.ts 文件中遇到錯誤。 我在嘗試將產品添加到購物車時在控制台中收到此錯誤錯誤錯誤：未捕獲（承諾）：類型錯誤：無法讀取未定義的屬性“key”。 我的錯誤是在 line product.key 這是代碼。

產品.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();
  }
}

購物車.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")
      }
    });
  }

產品.ts

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

Answer 1

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