angular - “AngularFireObject<{}>”类型上不存在属性“管道”

Question

我是 Angular 的初学者。我正在使用 Angular 版本 6 观看 Mosh Hamedani 的教程，但问题是教程版本是 4。我正在处理 AddToCart 按钮上的电子商务项目，产品应该通过单击按钮来增加数量并更新在 Firebase 中使用 productId 并且如果我尝试添加新产品，那么该新产品的 id 应该添加到 AngularFire 数据库中。

现在一切正常，我在 shopping-cart.service.ts 文件中遇到错误。错误在最后一行async addToCart(product: Product)中，错误显示 AngularFireObject 类型上不存在属性管道。

这是代码。

购物车.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Product } from '../models/products';
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()
    })
}

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);
}

private async getOrCreateCartId(){
    let cartId = localStorage.getItem('cartId');
     if(cartId) return cartId;

    let result = await this.create();
    localStorage.setItem('cartId', result.key);
    return result.key;
}

async addToCart(product: Product){
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.key);
    item$.pipe(take(1)).subscribe(item => {
        item$.update({ product: product, quantity:(item.quantity || 0) + 1 });
    });
}

}

标签： angulartypescriptangularfire2angularfire

Answer 1

这里的问题是您的this.getItem()方法没有返回 a Observable，而是返回AngularFireObject没有pipe属性的 ，因此您应该调用valuChanges将返回 a 的方法Observable

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

async addToCart(product: Product){
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.key);
    item$.pipe(take(1)).subscribe(item => {
        item$.update({ product: product, quantity:(item.quantity || 0) + 1 });
    });
}