1

I'm subscribing to an observable my service returns. The request to the backend works and I get a response. But the code inside the subscribe function is ignored.

I get the observable from the service like this:

my function() {
  return this.httpClient.post(url, data).pipe(map((response) => {return response.code === 200}))
}

The service works as the dev options network tab shows a response with code 200.

I assign the observable to a variable in the component

this.responseOk$ = this.myservice.myfunction()

and access it in the template like this:

<ng-container *ngIf="responseOk$ && responseOk$ | async; else someTemplate">
  <!-- this is the success content which is shown when the response was successful. -->
  <!-- for some reason, this content is never shown, even when the response is true. -->
</ng-container>

I tried debugging it by displaying the data of response$ on the page, but it's always empty

<!-- Nothing ever shows up here, even when the request was successful -->
{{responseOk$ | async}}

I also tried subscribing to the observable in the component which didn't work either

// Nothing gets printed to the console
this.responseOk$.subscribe((response) => {console.log(response);});

Versions: Angular: 12.2.16 Node: 14.19.3 rxjs: 6.6.7

This behaviour is really strange and I think this shouldn't even be possible. It works from time to time, but usually doesn't. npm ci helps raising the chances of it working, but it still doesn't most of the time.

What am I doing wrong?/How can I fix this?

sgart
  • 76
  • 6
  • 1
    Hey, welcom to the StackOverflow. Could you please add the code showing how you actually call the service function within the component? It would help to see how are ``response$`` and ``responseOk$`` values set – mat.hudak Jul 14 '22 at 12:35
  • 1
    Was a mistake on my side, it's always ``responseOk$``. I accidentally used ``response$`` when I simplified the code – sgart Jul 14 '22 at 12:42
  • 1
    Probably a race condition issue if it works in inconsistent way. – akkonrad Jul 14 '22 at 12:59
  • 1
    Here is wokring example based on your code, should be ok as reference. Debug your response to check what it returns, maybe it's something wrong there? https://stackblitz.com/edit/angular-ivy-tkv3fu – akkonrad Jul 14 '22 at 13:08
  • 1
    The response is correct. response.status contains the statuscode, response.data the empty object the endpoint returns. I made a dummy project for debugging and everything works flawlessly there. Might be an issue with the other project. – sgart Jul 14 '22 at 13:34
  • The return in your map function makes my nervous, you have no curly brackets. Try to remove the return statement oder add the curls – MoxxiManagarm Jul 14 '22 at 13:38
  • Doesn't work with and without the brackets – sgart Jul 14 '22 at 14:05
  • is `*ngIf="responseOk$ | async; else someTemplate"` but remember that if you're looking for the complete response you need add as option `{ observe: 'response' }` see the [docs](https://angular.io/guide/http#reading-the-full-response) else you get the response of the API – Eliseo Jul 14 '22 at 19:50
  • It works without issues for everyone else working on this project. So I don't think that's the solution. And we use get, not post. Is it the same there? The docs only mention get requests. – sgart Jul 15 '22 at 05:24

0 Answers0