Property 'pipe' does not exist on type 'AngularFireObject'












0














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


}










share|improve this question






















  • I think in newer versions you should be using valueChanges() as observable: github.com/angular/angularfire2/blob/master/docs/rtdb/…
    – muradm
    Nov 11 at 10:54
















0














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


}










share|improve this question






















  • I think in newer versions you should be using valueChanges() as observable: github.com/angular/angularfire2/blob/master/docs/rtdb/…
    – muradm
    Nov 11 at 10:54














0












0








0


1





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


}










share|improve this 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-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 });
});
}


}







angular typescript angularfire2 angularfire






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 11 at 10:45









Sharad Sharma

299




299












  • I think in newer versions you should be using valueChanges() as observable: github.com/angular/angularfire2/blob/master/docs/rtdb/…
    – muradm
    Nov 11 at 10:54


















  • I think in newer versions you should be using valueChanges() as observable: github.com/angular/angularfire2/blob/master/docs/rtdb/…
    – muradm
    Nov 11 at 10:54
















I think in newer versions you should be using valueChanges() as observable: github.com/angular/angularfire2/blob/master/docs/rtdb/…
– muradm
Nov 11 at 10:54




I think in newer versions you should be using valueChanges() as observable: github.com/angular/angularfire2/blob/master/docs/rtdb/…
– muradm
Nov 11 at 10:54












2 Answers
2






active

oldest

votes


















1














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





share|improve this answer























  • Property 'update' does not exist on type 'Observable<AngularFireObject<{}>>' and Property 'quantity' does not exist on type 'AngularFireObject<{}>'. this type of errors shows now.
    – Sharad Sharma
    Nov 11 at 11:18










  • ah sorry, I have updated my answer, please check again
    – Artyom Amiryan
    Nov 11 at 11:21










  • Sorry it doesn't work same issue that i have mention in above comment. Still the update and quantity are underline as a error in VS code.
    – Sharad Sharma
    Nov 12 at 9:37










  • is it lint error or your functions isn't working?
    – Artyom Amiryan
    Nov 12 at 9:42










  • actually it shows error in vscode by underline the update and quantity which definitely cause error while compiling. Can you please suggest me how to fix this issue
    – Sharad Sharma
    Nov 16 at 10:38



















0














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





share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247964%2fproperty-pipe-does-not-exist-on-type-angularfireobject%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














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





    share|improve this answer























    • Property 'update' does not exist on type 'Observable<AngularFireObject<{}>>' and Property 'quantity' does not exist on type 'AngularFireObject<{}>'. this type of errors shows now.
      – Sharad Sharma
      Nov 11 at 11:18










    • ah sorry, I have updated my answer, please check again
      – Artyom Amiryan
      Nov 11 at 11:21










    • Sorry it doesn't work same issue that i have mention in above comment. Still the update and quantity are underline as a error in VS code.
      – Sharad Sharma
      Nov 12 at 9:37










    • is it lint error or your functions isn't working?
      – Artyom Amiryan
      Nov 12 at 9:42










    • actually it shows error in vscode by underline the update and quantity which definitely cause error while compiling. Can you please suggest me how to fix this issue
      – Sharad Sharma
      Nov 16 at 10:38
















    1














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





    share|improve this answer























    • Property 'update' does not exist on type 'Observable<AngularFireObject<{}>>' and Property 'quantity' does not exist on type 'AngularFireObject<{}>'. this type of errors shows now.
      – Sharad Sharma
      Nov 11 at 11:18










    • ah sorry, I have updated my answer, please check again
      – Artyom Amiryan
      Nov 11 at 11:21










    • Sorry it doesn't work same issue that i have mention in above comment. Still the update and quantity are underline as a error in VS code.
      – Sharad Sharma
      Nov 12 at 9:37










    • is it lint error or your functions isn't working?
      – Artyom Amiryan
      Nov 12 at 9:42










    • actually it shows error in vscode by underline the update and quantity which definitely cause error while compiling. Can you please suggest me how to fix this issue
      – Sharad Sharma
      Nov 16 at 10:38














    1












    1








    1






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





    share|improve this answer














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






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 11 at 11:21

























    answered Nov 11 at 11:08









    Artyom Amiryan

    1,815113




    1,815113












    • Property 'update' does not exist on type 'Observable<AngularFireObject<{}>>' and Property 'quantity' does not exist on type 'AngularFireObject<{}>'. this type of errors shows now.
      – Sharad Sharma
      Nov 11 at 11:18










    • ah sorry, I have updated my answer, please check again
      – Artyom Amiryan
      Nov 11 at 11:21










    • Sorry it doesn't work same issue that i have mention in above comment. Still the update and quantity are underline as a error in VS code.
      – Sharad Sharma
      Nov 12 at 9:37










    • is it lint error or your functions isn't working?
      – Artyom Amiryan
      Nov 12 at 9:42










    • actually it shows error in vscode by underline the update and quantity which definitely cause error while compiling. Can you please suggest me how to fix this issue
      – Sharad Sharma
      Nov 16 at 10:38


















    • Property 'update' does not exist on type 'Observable<AngularFireObject<{}>>' and Property 'quantity' does not exist on type 'AngularFireObject<{}>'. this type of errors shows now.
      – Sharad Sharma
      Nov 11 at 11:18










    • ah sorry, I have updated my answer, please check again
      – Artyom Amiryan
      Nov 11 at 11:21










    • Sorry it doesn't work same issue that i have mention in above comment. Still the update and quantity are underline as a error in VS code.
      – Sharad Sharma
      Nov 12 at 9:37










    • is it lint error or your functions isn't working?
      – Artyom Amiryan
      Nov 12 at 9:42










    • actually it shows error in vscode by underline the update and quantity which definitely cause error while compiling. Can you please suggest me how to fix this issue
      – Sharad Sharma
      Nov 16 at 10:38
















    Property 'update' does not exist on type 'Observable<AngularFireObject<{}>>' and Property 'quantity' does not exist on type 'AngularFireObject<{}>'. this type of errors shows now.
    – Sharad Sharma
    Nov 11 at 11:18




    Property 'update' does not exist on type 'Observable<AngularFireObject<{}>>' and Property 'quantity' does not exist on type 'AngularFireObject<{}>'. this type of errors shows now.
    – Sharad Sharma
    Nov 11 at 11:18












    ah sorry, I have updated my answer, please check again
    – Artyom Amiryan
    Nov 11 at 11:21




    ah sorry, I have updated my answer, please check again
    – Artyom Amiryan
    Nov 11 at 11:21












    Sorry it doesn't work same issue that i have mention in above comment. Still the update and quantity are underline as a error in VS code.
    – Sharad Sharma
    Nov 12 at 9:37




    Sorry it doesn't work same issue that i have mention in above comment. Still the update and quantity are underline as a error in VS code.
    – Sharad Sharma
    Nov 12 at 9:37












    is it lint error or your functions isn't working?
    – Artyom Amiryan
    Nov 12 at 9:42




    is it lint error or your functions isn't working?
    – Artyom Amiryan
    Nov 12 at 9:42












    actually it shows error in vscode by underline the update and quantity which definitely cause error while compiling. Can you please suggest me how to fix this issue
    – Sharad Sharma
    Nov 16 at 10:38




    actually it shows error in vscode by underline the update and quantity which definitely cause error while compiling. Can you please suggest me how to fix this issue
    – Sharad Sharma
    Nov 16 at 10:38













    0














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





    share|improve this answer


























      0














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





      share|improve this answer
























        0












        0








        0






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





        share|improve this answer












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






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 23 at 11:03









        cjmash

        3818




        3818






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247964%2fproperty-pipe-does-not-exist-on-type-angularfireobject%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            Xamarin.form Move up view when keyboard appear

            Post-Redirect-Get with Spring WebFlux and Thymeleaf

            Anylogic : not able to use stopDelay()