'AngularFireObject'类型中不存在属性'pipe'

Question

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

现在一切都很完美我在shopping-cart.service.ts文件中遇到错误。该错误位于最后一行async addToCart（product：Product）中，其中错误显示属性管道在AngularFireObject类型上不存在。

这是代码。

购物，cart.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 });
    });
}

}

Answer 1

这里的问题是你的this.getItem()方法没有返回Observable，而是返回AngularFireObject，它没有pipe属性，所以你应该调用valuChanges方法，它将返回一个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 });
    });
}

Answer 2

也许而不是改变这条线到return this.db.object('/shopping-carts/' + cartId + '/items/' + productId).valueChanges();

保留它，因为它是return this.db.object('/shopping-carts/' + cartId + '/items/' + productId)然后在你调用getItem函数的函数之前订阅它你可以添加值更改应该有类似的东西

`private getItem(cartId: string, productId: string){
        return this.db.object('/shopping-carts/' + cartId + '/items/' + productId);
    }
 async addToCart(product: Product){
        let cartId = await this.getOrCreateCartId();
        let item$ = this.getItem(cartId, product.key).valueChanges();
        item$.pipe(take(1)).subscribe(item => {
            item$.update({ product: product, quantity:(item.quantity || 0) + 1 });
        });
    }`

Answer 3

async  addToCart(product:Product){

  let cartId= await this.getOrCreateCart();
  let item$$=this.getItem(cartId,product.key);
  let item$=this.getItem(cartId,product.key).snapshotChanges();
    item$.pipe(take(1)).subscribe(item=>{
      this.data=item.payload.val();

        if(this.data!= null){
          item$$.update({product:product,quantity:(this.data.quantity)+1});
        }else{
          item$$.set({product:product,quantity:1});
        }


    });
  }

Answer 4

在撰写此答案的时候，在AngularFireObject中你必须使用valueChanges()或snapshotChanges()。你可以阅读documentation here

如果您只是修改代码，请注意您的问题

item$.pipe(take(1)).subscribe(item => {})

至

item$.valueChanges().pipe(take(1)).subscribe(item => {})

会解决你的问题。

Answer 5

在代码中进行以下更改：

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

只需签出我在Angular 7中构建的Github存储库My Github Link。您的Angular 6项目将正常工作。