Using an Observable from AngularFireFunctions' httpsCallable, the view never updates with the value even after the http request returns.
I have a simple component that uses AngularFireFunctions to make an httpCallable to a simple function. I can see the call being made in the browser's network inspector, and I have a tap(x=>console.log(x)) on the observable which does indeed log the value returned from the function. However, {personObservable | async | json} is null even after the observable has a value (the console log from the tap triggers).
Component:
import { AngularFireFunctions } from '@angular/fire/functions';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Component({
selector: 'app-simple-test',
template: '{{personObservable | async | json}}'
})
export class SimpleTestComponent implements OnInit {
personObservable: Observable<any> = this.fireFunctions
.httpsCallable('getPerson')({})
.pipe(
tap(person => console.log(person))
);
constructor(
private fireFunctions: AngularFireFunctions) {
}
...
Firebase function:
import * as functions from 'firebase-functions';
export const viewInvite =
functions.https.onCall((data, context) => {
return {name: "test name"};
});
As expected, a page load causes an http request to the firebase function, and the console will contain {name: "test name"} indicating that the http request worked, tap was triggered, and the observable now has a value. The page will still render "null".
I've tried replacing the httpsCallable(...)(...) with a simple of({name:"test"}), and that worked fine.
Is there something special about the Observable that httpsCallable returns that prevents the view from using its value?
