BehaviorSubject .next() is not emitting updated value

Question

I just want to apologize for my lack of understanding of RxJS and Observables. I posted a question earlier but it was very poorly worded and I know it wasn't understandable, so after a day I think I can explain my issue better.

1. The objective of my code is to grab user input, pass it as an action stream to my data stream, compare the input to my array of bays, if it exists, return that single bay. If it doesn't exist (This is where I'm struggling) return an observable that I can call back in my bay.page.ts and check to see if its true or false. If it's false [Show client side error]. If it's true, navigate forward to the results page.
2. My bay-service.ts class contains my Data & Actions streams:

export class BayServiceService {
  private baysUrl = 'api/bays';

  bays$ = this.http.get<Bay[]>(this.baysUrl)
    .pipe(
      tap(data => console.log('Bays: ', JSON.stringify(data))),
      catchError(this.handleError)
    );

  /*--------------------------------------------------------------*/
  // Grab A Single Bay
  private baySelectedSubject = new BehaviorSubject<number>(0);
  baySelectedAction$ = this.baySelectedSubject.asObservable();

  invalidBay = new BehaviorSubject<boolean>(false);

  selectedBay$ = combineLatest([
    this.bays$,
    this.baySelectedAction$
  ])
    .pipe(
      map(([bays, selectedBayNumber]) => {
        if (!bays.find(bay => bay.bayCode === selectedBayNumber)){
          this.invalidBay.next(false);
        } else {
          this.invalidBay.next(true);
          return bays.find(bay => bay.bayCode === selectedBayNumber);
        }
      }),
      );

  selectedBayChanged(selectedBayNumber: number): void {
    this.baySelectedSubject.next(selectedBayNumber);
  }

^ In the above code I use a declarative RxJS approach selectedBay$ in which I combine my bay$ data stream, and my baySelectedAction$ Action Stream (Which contains the user input). I then map them and then compare the user input selectedBayNumber to a single bay number.

ISSUE: I am trying to use the Observable -> invalidBay = new BehaviorSubject<boolean>(false); that I created back in my bay-service.ts and check it's result: If it's true, navigate forward. If it's false, show a client side error that it doesn't exist. However, If the user enters a valid bay number, I try to change that Observable to true by doing this.invalidBay.next(true); BUT, the observable won't update it's value? The BehaviorObservable stays it's default value of 'false'. So the code is partially working, but not quite.

3. This is my onSubmit method in my bay-page.ts where I handle the user input for my action stream. I passed the user input into a method (which is in my bay-service.ts class). Depending on their input, I try to subscribe to the Observable that is "supposedly updated" and go from there. But the Observable is not being updated. Please help.

onSubmit() {
    this.bayService.selectedBayChanged(this.bayForm.get('bayStart').value);
    this.subscription = this.bayService.invalidBay.subscribe(value => {
        if (value) {
            this.navCtrl.navigateForward([`/results/`]);
        } else {
            this.bayDoesNotExistError = true;
            this.selectedBay = this.bayForm.get('bayStart').value;
            this.vibration.vibrate(500);
            console.log('Vibrating for 3 second...')
        }
    })
}

Why is the Observable not having it's value updated? Please, my mind hurts and I don't know what else to do.

Answer 1

An observable does nothing if no observer subscribes to it. You didn't subscribe to the selectedBay$ observable. Therefore, the code in pipe from combineLatest is not executing at all, no matter how many times new values are emitted to your action stream, and you are always receiving the initial false value from invalidBay.

Some suggestions :

1. A BehaviorSubject is a multicasting observable and you should always keep it private to minimize the scope of calling next() on it. Expose it as an observable with the .asObservable() method, and if any external code needs the ability to emit new value, provide a public method to do that. You are already handling baySelectedSubject in this way. Consider doing the same for invalidBay.

2. Never put your subscription code in a method that will execute multiple times. You'll end up creating a new subscription each time the method gets executed. The observable will emit values to each of those subscription. So, remove your subscription from onSubmit() and put it in ngOnInit().

In your service, change -

invalidBay = new BehaviorSubject<boolean>(false);

to -

private invalidBay = new BehaviorSubject<boolean>(false);
invalidBay$ = this.invalidBay.asObservable();

and in your component -

ngOnInit(): void {
    this.bayService.selectedBay$.subscribe(
        p => {
            // do something with the Bay value
        }
    );

    this.bayService.invalidBay$.subscribe(
        p => {
            // do something with the invalidBay value
        }
    );
}

onSubmit(): void {
    this.bayService.selectedBayChanged(this.bayForm.get('bayStart').value);
}