Property 'pipe' does not exist on type 'AngularFireObject<{}>'

user_4679943 0
Viewed 3707

I'm a beginner to Angular. I'm watching the tutorial of Mosh Hamedani using the Angular version 6 but the problem is the tutorial version is 4. I'm working on the e-commerce project on AddToCart button where the product should increase it's quantity by clicking the button and updated in Firebase using productId and also if I try to add new product then id of that new product should add in AngularFire Database.

Everything is working perfectly now I'm getting error in shopping-cart.service.ts file. The error is in the last line async addToCart(product: Product) where the error shows property pipe doesn't exist on type AngularFireObject.

Here is the code.

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

}

angularfire2 angularfire angular typescript
6 Answers

the problem here is that your this.getItem() method isn't returning an Observable, instead it returns AngularFireObject, which hasn't pipe property, so you should call valuChanges method which will return an 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 });
    });
}
user_104303290

As the time of writing this answer, In AngularFireObject you have to use either valueChanges() or snapshotChanges(). You can read the documentation here

Coming to your concern if you simply modify your code from

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

to

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

will solve your problem.

user_30541200

maybe instead of changing this line to return this.db.object('/shopping-carts/' + cartId + '/items/' + productId).valueChanges();

leave it as it was return this.db.object('/shopping-carts/' + cartId + '/items/' + productId) then in the function you are calling the getItem function before subscribing to it you can add value changes there should be something like 

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


    });
  }
user_44813210

Make following changes in your code: 

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

Just check-out my Github repository My Github Link which is built in Angular 7. Your Angular 6 project will work fine.

user_74749030

the best answer is incomplete in my opinion - just as @Sharad Sharma commented, this results in an error:

Property 'update' does not exist on type 'Observable<AngularFireObject<{}>>' and Property 'quantity' does not exist on type 'AngularFireObject<{}>'. this type of errors shows now

To get rid of this error You need to type the object() function. E.g if Your '/shopping-carts/' + cartId + '/items/' + productId node in firebase have two key/value pairs:

name: "test",
quantity: 1

Create an Object:

export class Product {
    name: string;
    quantity: number;

    constructor() {}
}

and then do this:

this.db.object<Product>('/shopping-carts/' + cartId + '/items/' + productId)...
user_29041380
Related