Looking up a reference from a document field from the template in Ionic/Angular with AngularFire2/Firestore

Question

I am working on an Ionic 3 App (Uses Angular 4). I am using Angularfire2 to interact with my Firestore database. Currently, I am retrieving a document as an observable and displaying it's fields in my template.

My problem is one of my fields in the document is a reference to another document (categories). from the template, I'm trying to do something like this:

<ion-badge>{{ getCategory( (pro.element | async)?.category ) }}</ion-badge>

which is calling a function in my provider that looks like this:

getCategory(ref:AngularFirestoreDocument<Category>){
   if(ref){
     ref.valueChanges().subscribe(val =>{
       return val.name;
     });
   }
}

I have no idea if this is an appropriate/sustainable way to retrieve the reference document, as I have looked all over and not found any detailed documentation covering this. When I log this it seems to iterate over thousands of times, returning a DocumentReference Object, but I get the error that valueChanges() isn't a function.

Any direction on best practice in this circumstance would be greatly appreciated.

Thank you

score 0 · Answer 1 · edited Jan 05 '18 at 20:23

When you use async pipe thats mean you are dealing with observable or promise data. In getCategory function you have subscribed to observable and we know that async pipe will do that for us, so you should only format your data.

your function will be :

import {Observable} from 'rxjs/Observable';
import "rxjs/add/operator/of";

...

getCategory(ref:AngularFirestoreDocument<Category>){
   if(ref){
     ref.valueChanges().map(val =>{
       return val.name;
     });
   }
   else{
       //return an empty string to get rid of any error when there is no ref.
       return    Observable.of("");
   }
}

Looking up a reference from a document field from the template in Ionic/Angular with AngularFire2/Firestore

1 Answers1