Q:

Angular RxJS null value after being unloaded

I created an observable that emits arrays.
If I use it in a template, like: {{ ob | async }} it works fine.
However, if I do:
<div *ngIf="is">{{ ob | async | json }}</div>
<div *ngIf="!is">{{ ob | async | json }}</div>

The first time I see the correct JSON, but if I flip is, I see null.
Observable creation code:
return Rx.Observable.create((observer: Rx.Observer<Array<GeoFireLocation>>) => {
  let locations: Array<GeoFireLocation> = [];

  geoQuery.on('key_entered', (key, location, distance) => {
    locations = this.insertIntoSortedArray({
      key, distance,
      coordinates: {
        latitude: location[0],
        longitude: location[1]
      }
    }, locations);
    observer.next(locations);
  });

  geoQuery.on('key_exited', (key) => {
    locations = locations.filter(location => location.key === key);
    observer.next(locations);
  });
}).finally(() => geoQuery.cancel());

A:

It happens because the finally is being called whenever I flip the is variable.
No idea how to cleanup the observable, but at least I found the problem here.

