CODEWITHSUNDEEP
angulartypescriptfirebaseionic-frameworkgoogle-cloud-firestore
Kaustubh pande
Kaustubh pande

Reputation: 27

read values from firestore document ionic

I have a service which fetches a particular document from firestore using this method

getBidremains(userId: string){ return this.firestore.collection('userProfile').doc(userId);

In the typscript class I am calling this method in ngOnInit as this.userInfo = this.firestoreService.getBidremains(userid).valueChanges().subscribe(data => console.log(data));

In the console I can see the data is fetched correctly, but when i try to use this.userInfo.remainBids it prints nothing. In the console it shows as undefined.

But in the html file( after removing .subscribe) i am able to print the correct value from firebase using {{ (userInfo | async)?.remainBids}} Can someone please help me out here, not sure what is it that I am doing wrong. I want to fetch the document and be able to read values of the field contained in the document.

firestore database document fields are simple it contains email, name and other fields

This is firestore service function name is getBidremains(userId: string)

This is the typescript class where the call is made this.userInfo = this.firestoreService.getBidremains(userid).valueChanges().subscribe(data => console.log(data));

Upvotes: 1

Views: 576

Answers (2)

Patric
Patric

Reputation: 1637

The userinfo variable is assigned to a Subscription, which does not have a remainBids property. You either need to assign the variable inside the subscribe, like this:

...subscribe(data => {this.userInfo = data})

or make your userInfo variable an Observable and assign it like this:

this.userInfo = this.firestoreService.getBigremains(userid).valuechanges()

Upvotes: 1

frunkad
frunkad

Reputation: 2543

.subscribe() method returns a Subscription

If you need this.userInfo.remainBids to have the remaining bids, use it inside the subscribe method()

this.userInfoSubscription = this.firestoreService.getBigremains(userid).valuechanges().subscribe(data => {
    this.userInfo = data;
});

Also, don't forget to unsubscribe the Subscription inside ngOnDestroy.

Upvotes: 1

Related Questions