Angular .subscribe not updating data

Question

I am having trouble with .subscribe() in angular, where the values I use to update the UI are not themselves updating. In my Inspect Element Network tab, I can see that the data is correct. And before anyone mentions it, the nested .subscribe() is not the problem, the first subscribe is always true, as the user must be logged in to view this screen.

ngOnInit(): void {
    this.service.isLoggedIn().subscribe( u => {
        this.user = u;
        this.id = this.location.selected.value.id
        this.location.getSelected().subscribe( selectedLocation => {
          if (selectedLocation) {
            this.showTable = true;
            if (selectedLocation.members) {
              this.member = true;
            }
            if (selectedLocation.schedules) {
              this.schedules = true;
            }
            if (selectedLocation.team) {
              this.team = true;
            }
          }
        });
    });

getSelected(): Observable<Location> {
    if (this.selected && this.selected.value) {
      return of(this.selected.value);
    } else {
      return this.selected.asObservable();
    }
  }

This is what is shown in my Network tab in Inspect Element:

{
    "id": 4,
    "member": true,
    "schedules": true,
    "team": false
}

However, when I go to this page, for example, the if(selectedLocation) is triggered, but the other if()s are not, and thus my variables are not changed, therefore neither is the UI.

Answer 1

I don't think we can see enough here to really get at what the problem is. If it's about angular's change detection, the following may help.

// Angular will perform this dependency injection for you
constructor(private ngZone: NgZone) { }

/*****
 * Wrap every emission of an observable (next, complete, & error)
 * With a callback function, effectively removing the invocation
 * of these emissions from the observable to the callback.
 *
 * This isn't really too useful except for as a helper function for
 * our NgZone Operators where we leverage this wrapper to run an
 * observable in a specific JavaScript environment.
 *****/
callBackWrapperObservable<T>(
  input$: Observable<T>, 
  callback: (fn: (v) => void) => void
): Observable<T> {
  const callBackBind = fn => (v = undefined) => callback(() => fn(v));
  const bindOn = (ob, tag) => callBackBind(ob[tag].bind(ob));
  return new Observable<T>(observer => {
    const sub = input$.subscribe({
      next: bindOn(observer, "next"),
      error: bindOn(observer, "error"),
      complete: bindOn(observer, "complete")
    });
    return { unsubscribe: () => sub.unsubscribe() };
  });
}

/*****
 * If we've left the angular zone, we can use this to re-enter
 * 
 * If a third party library returns a promise/observable, we may no longer be in
 * the angular zone (This is the case for the Google API), so now we can convert such
 * observables into ones which re-enter the angular zone
 *****/
ngZoneEnterObservable<T>(input$: Observable<T>): Observable<T> {
  return this.callBackWrapperObservable(input$, this.ngZone.run.bind(this.ngZone));
}

/*****
 * This is a pipeable version of ngZoneEnterObservable
 *****/
ngZoneEnter<T>(): MonoTypeOperatorFunction<T> {
  return this.ngZoneEnterObservable;
}

/*****
 * Any actions performed on the output of this observable will not trigger 
 * angular change detection. 
 *****/
ngZoneLeaveObservable<T>(input$: Observable<T>): Observable<T> {
  return this.callBackWrapperObservable(input$, this.ngZone.runOutsideAngular.bind(this.ngZone));
}

/*****
 * Pipeable version of ngZoneLeaveObservable
 *****/
ngZoneLeave<T>(): MonoTypeOperatorFunction<T> {
  return this.ngZoneLeaveObservable;
}

// How I would use this to try to solve your problem.
ngOnInit(): void {
  this.service.isLoggedIn().pipe(

    mergeMap(u => {
      this.user = u;
      // The logic of the following line makes no sense to me, 
      // you're assuming selected has a value and then right after
      // you're calling a function that explicitly doesn't assume this.
      this.id = this.location.selected.value.id;
      return this.location.getSelected();
    }),

    ngZoneEnter()

  ).subscribe(selectedLocation => {

    if (selectedLocation) {
      this.showTable = true;
      if (selectedLocation.members) {
        this.member = true;
      }
      if (selectedLocation.schedules) {
        this.schedules = true;
      }
      if (selectedLocation.team) {
        this.team = true;
      }
    }
    
  });
}

Answer 2

I put together a stackblitz for you here: https://stackblitz.com/edit/angular-posts-behavior-subject-procedural-vs-declarative-zsbs9e

Hopefully it is close enough to represent what you are trying to achieve.

Here is the key pieces of code:

  // Stream that emits the logged in user
  loggedInUser$ = this.isLoggedIn();

  // Stream that emits each time the user selects a different location
  locationChangedSubject = new BehaviorSubject<number>(0);
  locationChanged$ = this.locationChangedSubject.asObservable();

  // Combined stream to ensure both streams emit before processing
  selectedLocation$ = combineLatest([
    this.loggedInUser$,
    this.locationChanged$
  ]).pipe(
    switchMap(([user, locationId]) =>
      this.getSelected(locationId).pipe(
        tap(selectedLocation => {
          this.showTable = Boolean(selectedLocation);
          this.member = Boolean(selectedLocation?.members);
          this.schedules = Boolean(selectedLocation?.schedules);
          this.team = Boolean(selectedLocation?.team);
        })
      )
    )
  );

A few notes:

1. I created individual declared properties for each of the streams. This gives you more flexibility, makes it easier to subscribe/unsubscribe (if you don't use an async pipe) or bind directly to the property (if you do use an async pipe).

2. I used a combineLatest to combine the streams instead of using nested subscribes. (Nested subscribes are not a recommended technique.)

3. I modified the set of if conditions to set true OR false. Currently it appeared you were only ever setting the values to true, never to false to clear them.

4. Since the switchMap is a higher order mapping operator, it automatically subscribes to it's inner observable (the one returned from the this.getSelected().