CODEWITHSUNDEEP
angularrxjs
pjlamb12
pjlamb12

Reputation: 2422

RxJS forkJoin not emitting values

I am trying to use the forkJoin operator to combine two observables and output a new value. One of the calls brings back an array of objects with data related to multiple people on an insurance policy (that part can't change). Another observable tells us who is logged in. I was thinking of using forkJoin to get both values and return the info only for the logged in user. Here's how I'm trying to build that new observable:

this.incentiveStepsHistory$ = forkJoin({
    incentiveStepsHistory: this._steps.getIncentiveStepsHistory(year),
    loggedInPerson: this._member.loggedInPerson$,
}).pipe(
    tap((data: any) => console.log(data)),
    map((data: any) => {
        // get the data that I want
    })
    untilDestroyed(this),
)

I've tried this way, as well as getting rid of the this.incentiveStepsHistory$ = part and just subscribing (just for testing purposes). When I do this and I check the Network tab in developer tools, I see the first call made and come back successfully. The second observable, loggedInPerson, is a BehaviorSubject.asObservable observable. When I pipe and tap in the service where that observable is created, the data is logged to the console. So both observables do work, technically.

I've also tried the parameter of the forkJoin being an object like it is above, as well as passing each observable as its own parameter. No difference, everything works the same.

The problem is that the data never comes back to the component where the forkJoin is created. The tap in the pipe shown here is never hit, and neither is the map. Subscribing either explicitly or via the async pipe in a template has the same effect: nothing is output.

I feel like I've done it correctly, but nothing happening. Any tips are greatly appreciated.

Upvotes: 3

Views: 4326

Answers (1)

frido
frido

Reputation: 14109

forkJoin only emits when every inner Observable completed. Your BehaviorSubject doesn't complete so forkJoin won't emit anything.

You can use take(1) if you only care about the current value from your BehaviorSubject.

this.incentiveStepsHistory$ = forkJoin({
    incentiveStepsHistory: this._steps.getIncentiveStepsHistory(year),
    loggedInPerson: this._member.loggedInPerson$.pipe(take(1)),
})

Or you could use combineLatest if you want to emit new values when your BehaviorSubject gets a new value.

this.incentiveStepsHistory$ = combineLatest([
    this._steps.getIncentiveStepsHistory(year),
    this._member.loggedInPerson$,
])

Upvotes: 11

Related Questions