来自 firebase 的密钥问题 - return 来自我的界面未定义

Question

我正在学习 Mosh Hamedami 的在线课程。我或多或少一直在关注它，但一切正常。我可以将产品添加到 Firebase 并 Edit/Delete 它们。现在我想实现一个 "shopping-cart"，我可以在其中添加特定的 CardId 并将项目 + 数量添加到该 cardId

但是我遇到了一个问题，我想将产品添加到 firebase 购物车。添加带有 cartId 的购物车 - 时间戳有效。不知何故我无法将项目添加到 cartId。

我猜 Observable 有问题...

控制台错误是：

_core.js:6260 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'key' of undefined
TypeError: Cannot read property 'key' of undefined_
at ShoppingCartService.<anonymous> (shopping-cart.service.ts:51)

它告诉我来自 'addToCart' 的产品未定义。

  addToCart(product: Product) {
    this.shoppingCartService.addToCart(product);
    console.log(product);
  }

另外我的编译器告诉我 take form .pipe(take(1)) 是：

_error TS2684：'void' 类型的 'this' 上下文不可分配给“Observable”类型的方法 'this'。

pipe(first()) 以某种方式工作，但传递与密钥相同的问题。

我试了很多都无法找出我的错误。我也是 Angular 的新手所以..我真的很感激任何我必须搜索问题的提示。

购物-cart.service.ts

import {Injectable} from '@angular/core';
import {AngularFireDatabase} from "@angular/fire/database";
import {Product} from "./models/product";
import 'rxjs/add/operator/take';
import {take} from "rxjs-compat/operator/take";
import {pipe} from "rxjs";
import {Observable} from "rxjs";
import {first} from "rxjs/operators";


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

  constructor(private db: AngularFireDatabase) {
  }

  //create shopping cart in db + add date(timestamp)
  private create() {
    return this.db.list("/shopping-carts").push({
      dateCreated: new Date().getTime()
    });
  }

  private getCart(cartId: string) {
    return this.db.object('/shopping-carts/' + cartId);
  }

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

  //getting reference to shopping cart
  private async getOrCreateCartId(): Promise<string> {

    let cartId = localStorage.getItem('cartId');
    if (cartId) return cartId;
    // calls this.create and waits for the response
    let result = await this.create();
    //saves cartId in local storage and returns
    localStorage.setItem('cartId', result.key);
    return result.key;
  }

  //add new product to cart and safe localstorage
  async addToCart(product: Product) {
    const cartId = await this.getOrCreateCartId();
    //reference to products in firebase cart
    const item$ = this.getItem(cartId, product.key);

    item$.snapshotChanges().pipe(take(1)).subscribe((item: any) => {
      if (item) {
        item$.update({product: product, quantity: (item.quantity || 0) + 1});
      }
    });
  }
}

product.ts

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

html 正在调用 addToCart:

<div class="columns is-multiline is-narrow">
  <ng-container *ngFor="let p of filteredProductsByCategory">
    <div class="column is-one-third">
      <div class="card">
        <figure class="image is-square">
          <img [src]="p.imageURL" alt="{{p.title}}">
        </figure>
      </div>
      <div class="card-content">
        <p class="title"> {{p.title}}</p>
        <p class="subtitle">{{p.price | currency: "USD"}}</p>
        <div
             (click)="addToCart(product)"
             class="button is-outlined is-primary"> Add to Cart</div>
      </div>
    </div>
  </ng-container>
</div>

如果需要，我也可以将我的代码上传到 GitHub！谢谢！！

Answer 1

// add new product to cart and safe localstorage
async addToCart(product: Product) { ... }

很有可能在调用 addToCart 时根本没有设置 product。您应该检查调用函数的点（*.component.ts 或 *.component.html?），并且应该设置产品。

编辑：

我猜你想传递 p 而不是 product。尝试以下操作：

<div
    (click)="addToCart(p)"
    class="button is-outlined is-primary"> Add to Cart</div>

来自 firebase 的密钥问题 - return 来自我的界面未定义

problem with key from firebase - return from my interface is undefined

javascript

firebase

angularfire

firebase-realtime-database

angular