I’ve come across what appears to be an access issue. I have a Subject in a service, shared via a public accessor as an observable.
// can't subscribe with async
private _connection$: Subject<number> = new Subject();
public get connection$(): Observable<number> {
return this._connection$.asObservable();
}
// this one works as I'd expect it
private _interval$ = interval(1000);
public get interval$(): Observable<number> {
return this._interval$;
}
When I subscribe to connection$ in a component controller I can access the emissions in the UI. However when I try to directly access it with an async pipe, I can’t. I added another observable as a property to the service and I can directly access that using async.
<div>from shared obs$: {{ data.interval$ | async }} - works</div>
<div>from async: {{ data.connection$ | async }} - doesn't work</div>
<div>from observable: {{ fromObservable$ | async }} - works</div>
<div>from subscription: {{ fromSubscription }} - works</div>
public fromSubscription: number = 0;
public fromObservable$: Observable<number> = this.data.connection$;
constructor(public data: DataService) {
data.connection$.subscribe({
next: (count) => (this.fromSubscription = count),
});
}
I can work around it. But I’d like to understand why this is the case. It seems that the Subject returned asObservable in the service accessor isn’t subscribable via async but a regular observable is.
1 post - 1 participant