如何解决Angular12+Firebase:TypeError:无法读取 ProductCardComponent.getQuantity
作为初学者,尝试按照较旧的教程(在 Angular 4 中开发)开发一个小型电子商务项目。我正在 Angular 12 和 Firebase 中开发它。到目前为止,一切正常,直到我在将产品添加到购物车时收到错误。 CartId 已成功创建,但在向其中添加产品时会引发以下错误。同样在 Firebase 中,产品被添加到未定义节点而不是唯一的产品密钥下(如附图所示):
错误:类型错误:无法读取未定义的属性“未定义” 在 ProductCardComponent.getQuantity
我不确定,代码中缺少什么。 Firebase 权限规则如下:
{
"rules": {
".read": "auth != null",".write": "auth != null","categories": {
".read": true
},"products": {
".read": true
},"shopping-carts":{
".read": true,".write": true
}
}
}
你们中的任何人都可以帮助我理解问题并修复代码。 代码如下:
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>
product-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 });
});
}
}
product.ts
export interface Product {
$key: string;
title: string;
price: number;
category: string;
imageUrl: string;
}
Firebase structure with undefined productId
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。