I am currently developing a geolocation application, where users' locations are captured and stored in an array called "nearme" using Firebase. The intention is to convert this array into an observable for real-time updates on nearby users in the app's components. However, I seem to be encountering an issue with accessing the array in the outputUsers() function, preventing any data from being passed through. I'm unsure of what the specific problem might be or how to properly make this array asynchronous within the component to enable dynamic updates on users who are close by. Any assistance would be greatly appreciated.
import { Injectable, NgZone } from '@angular/core';
import { Geolocation, Geoposition, BackgroundGeolocation } from 'ionic-native';
import 'rxjs/add/operator/filter';
import { Fb } from './firebase';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { AsyncSubject } from 'rxjs/AsyncSubject';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
export class Iusers {
userid: string;
userdistance: string;
userloc: string;
}
@Injectable()
export class LocationTracker {
public usersNearMe$: Observable<Iusers[]>;
private _usersNearMeObserver: Observer<Iusers[]>;
private _usersNearMeDataStore: { users: Iusers[] };
public nearme = <[Iusers]>[];
constructor(public zone: NgZone, public fire:Fb ) {
this.usersNearMe$ = new Observable<Iusers[]>(observer => this._usersNearMeObserver = observer).share();
this._usersNearMeDataStore = { users: [] };
}
startTracking( activeUser:any ) :any {
... other actions taking place ....
geoQuery.on("key_entered", (key, location, distance) => {
this.nearme.push({ userid: key, userloc: location, userdistance: distance.toFixed(2) });
});
}
outputUsers() {
this._usersNearMeDataStore.users = this.nearme;
this._usersNearMeObserver.next(this._usersNearMeDataStore.users);
}
}
The Component responsible for presenting this information upon receipt is structured as follows:
export class OverviewPage {
public members: FirebaseListObservable<any[]>;
public activeUser: string;
public usersNearMe: Observable<any>;
constructor( public locationTracker: LocationTracker, public fire: Fb, af: AngularFire, public appHeaderPopover:AppHeaderPopoverController, public zone: NgZone, public navCtrl: NavController, public navParams: NavParams ) {
this.locationTracker.startTracking( this.activeUser );
this.locationTracker.usersNearMe$
this.locationTracker.outputUsers();
}
... additional features...
}
and the corresponding html layout
<div class="" *ngFor="let item of usersNearMe | async">
displaying item {{ item.key }}
</div>