typescript - Angular12+Firebase：TypeError：无法读取 ProductCardComponent.getQuantity 处未定义的属性“未定义”

Question

作为初学者，尝试按照较早的教程（在 Angular 4 中开发）来开发一个小型电子商务项目。我正在 Angular 12 和 Firebase 中开发它。到目前为止，一切正常，直到我在将产品添加到购物车时收到错误。CartId 已成功创建，但在向其中添加产品时会引发以下错误。同样在 Firebase 中，产品被添加到未定义的节点而不是唯一的产品密钥下（如附图所示）：

错误：TypeError：无法读取 ProductCardComponent.getQuantity 处未定义的属性“未定义”

我不确定，代码中缺少什么。Firebase 权限规则如下：

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null",
    "categories": {
      ".read": true
    },
    "products": {
      ".read": true
    },
    "shopping-carts":{
      ".read": true,
      ".write": true
    }
  }
}

Firebase 结构

你们中的任何人都可以帮助我理解问题并修复代码吗？代码如下：

product-card.component.html

<div *ngIf="product.title" class="card">
<img *ngIf="product.imageUrl" [src]="product.imageUrl" class="card-img-top" alt="product.title">
<div class="card-body">
    <h5 class="card-title">{{ product.title }}</h5>
    <p class="card-text">{{ product.price | currency: 'INR' }}</p>
</div>
<div *ngIf="showActions" class="card-footer">
    <button 
        *ngIf="getQuantity() === 0; else updateQuantity"
        (click)="addToCart()"
        class="btn btn-secondary">
        Add to Cart
    </button>
    <ng-template #updateQuantity>
        <div class="row row-no-gutters">
            <div class="col-2">
                <button 
                    class="btn btn-secondary"
                    (click)="removeFromCart()"> 
                    -
                </button>
            </div>
            <div class="col text-center">
                {{ getQuantity() }} in cart
            </div>
            <div class="col-2">
                <button 
                    class="btn btn-secondary"
                    (click)="addToCart()"> 
                    +
                </button>
            </div>
        </div>
    </ng-template>
</div>

产品-card.component.ts

import { ShoppingCartService } from './../shopping-cart.service';
import { ProductService } from './../product.service';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Product } from '../models/product';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit, OnDestroy {
  products: Product [] | any = [];
  filteredProducts: Product [] | any = [];
  category: string | any;
  cart: any;
  subscription: Subscription | any;

  constructor(
    route: ActivatedRoute,
    productService: ProductService,
    private shoppingCartService: ShoppingCartService
    ) {
      productService
        .getAll()
        .valueChanges()
        .subscribe(products => {
        this.products = products;

        route.queryParamMap.subscribe(params => {
          this.category = params.get('category');
  
          this.filteredProducts = (this.category) ?
            this.products.filter((p: any) => p.category === this.category) :
            this.products;
        });
      });
    }

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

    ngOnDestroy(){
      this.subscription.unsubscribe();
    }

}


**shopping-cart.service.ts**

import { ShoppingCart } from './models/shopping-cart';
import { Product } from './models/product';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
import { Injectable } from '@angular/core';
import { take } from 'rxjs/operators'; 

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

  constructor(private db: AngularFireDatabase) { }

  private create() {
    return this.db.list('/shopping-carts').push({
      dateCreated: new Date().getTime()
    });
  }

  async getCart(): Promise<AngularFireObject<ShoppingCart>> {
    let cartId = await this.getOrCreateCartId();
    return this.db.object('/shopping-carts/' + cartId);
  }

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

  private async getOrCreateCartId(): Promise<string>  {
    let cartId:any  = localStorage.getItem('cartId');

    if (cartId) return cartId;

    let result: any = await this.create();
    console.log('result.key: '+result.key);
    localStorage.setItem('cartId', result.key);
    return result.key;
  }

  async addToCart(product: Product) {
    this.updateItemQuantity(product, 1);
  }

  async removeFromCart(product: Product) {
    this.updateItemQuantity(product, -1);
  }

  private async updateItemQuantity(product: Product, change: number) {
    let cartId = await this.getOrCreateCartId();
    let item$:any = this.getItem(cartId, product.$key);
    console.log('cartId: '+cartId+'; item: '+item$+'; prod_key: '+product.$key);

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

产品.ts

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

具有未定义 productId 的 Firebase 结构

标签： typescriptfirebase-realtime-databaseundefinedangular12