RxJS - Tell observable to wait for other observable to emit non null value

Question

I've got this setter which assigns a class member observable systemAreasOptions$. I do it there because it needs to wait for mappedItem$ to have had an emission which is not null. I originially had systemAreasOptions$ assigned at the class level, but it did not wait for mappedItem$. For some reason I couldn't even get the HTML to rerender when using the asyncPipe. How do I tell an observable (systemAreasOptions$ to wait for another observable (mappedItem$), instead of just assigning it where the other one emits?

public set mappedItem(mappedItem: IPermissionsMappedItem) { mappedItem.hydrate$Permissions().then(_ => { this.mappedItem$.next(mappedItem); this.systemAreasOptions$ = from( this.lookupService.SYSTEM_AREAS.toNestedLookup() .$promise as unknown as Observable<IPermissmissionsLookup[]> ).pipe( map(systemAreas => orderBy(systemAreas,systemArea => systemArea?.label?.toLowerCase())), map(systemAreas => systemAreas.map(area => ({ ...area, permissions: this.getPermissionsForArea(area.id) }))), shareReplay(1), tap(console.log) ); this._subscriptions.add( this.systemAreasOptions$.subscribe( this.systemAreasOptionsBehaviourSubject$) ); }); }

H3AR7B3A7 · Accepted Answer · 2021-10-14 22:54:10Z

You can combine the observables:

Create an observable that only emits mappedItems that aren't null
Emit both values only when it emits

I beleave you are looking for withLatestFrom:

higherOrder$ = mappedItemThatIsNotNull$.pipe( withLatestFrom(systemAreasOptions$) )

In your template:

higherOrder$ | async

This will yield [mappedItem, systemAreaOptions]

Collectives™ on Stack Overflow

RxJS - Tell observable to wait for other observable to emit non null value

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related