Complete not getting called in Observable subscribe method

Question

I am working on the angular application and I am trying to use RxObservable. Below is the sample code.

getMyData(){
 console.log('get my account data called');
  this.AccountService
    .getMyAccountData()
    .filter(_res => _res !== null)
    .takeUntil(this.ngUnsubscribe)
    .subscribe({
        next: _response => {console.log('call finished');}
        error: error => {
            console.log('had an error');
            handleHttpError(error);
       },
       complete: () => {
           console.log('account data loaded is being set');
           this.accountDataLoaded = true;
       }
    });
}

Now this is an angular 2 app (Single page application). When I reload the page, the complete part of above function gets called and this.accountDataLoaded is true.

However, If I move to other component and come back to this one, the complete is not getting called and accountDataLoaded stays false.

I see there's no error on the console as well since I am logging the error as you can see above.

I am thinking either filter or takeUntil function on that observable are causing that but I am not sure.

show us where you're calling this function, also show us the `ngUnsubscribe` — Milad, Apr 10 '18 at 00:12
Can you show us how you have your component set up and how this method is getting called in it? — Daniel W Strimpel, Apr 10 '18 at 00:35
I'm not sure why `complete` is not getting fired without more context, but if this is an observable from an HTTP call, HTTP observables always fire once and then complete so you don't typically need to use a `complete` callback in addition to `success`. — Ryan Silva, Apr 10 '18 at 01:01
Since here you are not saving this subscription, the ngUnsubscribe is not in context. Account data 'should not be' null regardless of any number of calls. Put a debugger inside the service call to see if its getting hit properly or not. Looks like some other conditional is preventing the call to even happen — NitinSingh, Apr 10 '18 at 04:24
Also you can comment out the filter and takeUntill calls just to see if your service calls are happening in other case.. Just to pinpoint what can be the issue — NitinSingh, Apr 10 '18 at 04:25

score 18 · Answer 1 · answered Feb 15 '20 at 13:08

With RXjs behaviour complete is not been called if error is called. In your case you need do the following thing.

  getMyData(){
 console.log('get my account data called');
  this.AccountService
    .getMyAccountData()
    .filter(_res => _res !== null)
    .takeUntil(this.ngUnsubscribe)
    .subscribe({
        next: _response => {console.log('call finished');}
        error: error => {
            console.log('had an error');
            handleHttpError(error);
       },
       complete: () => {
           console.log('account data loaded is being set');
           this.accountDataLoaded = true;
       }
    }).add(() => {
         //Called when operation is complete (both success and error)
    });
}

Complete not getting called in Observable subscribe method

1 Answers1

Linked