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

Question

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-comme

Answer 1

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.

Answer 2

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 3

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.

Answer 4

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

Answer 5

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)...

Answer 6

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