How can I prevent the Angular async pipe from making frequent server calls when no results come back?

I'm using the

async

pipe in an ngFor to watch an Observable. The Observable is created by a service that hits my server, and on load time when ngFor loop is enumerated, the service correctly makes a call to the server.

Now for the part I don't understand: when any results come back everything happens as expected. But if the server responds with say, a 404 and no results are available for enumeration, the

async

pipe causes the service to continue to fire requests, milliseconds apart. This is obviously no good. What's the design expectation here and how can I gracefully handle an Observable that returns an error while using an async pipe?

I had a very similar issue, and it was due to how Angular2 change detection works. There are multiple solutions that worked for me.

Save a reference to observable so that it doesn't change

Right now your when you call persons getter, it always returns a new instance of Observable (e.g. a different object), so Angular reevaluates the whole thing, and during the next change detection cycle, it does it once again, and then again, ... So, this is how it can be solved: