使用AngularFire2 / Firestore在Ionic / Angular中的模板中从文档字段中查找引用

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

Answer 1

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