Javascript 从服务中的数组创建异步可观察对象并输出到模板

我正在构建一个地理定位应用程序，用户登录时，他们的位置会被添加，通过Firebase将他们的详细信息和坐标推送到阵列“nearme”中。期望的结果是，这个数组将变成一个可观察的，我可以在html组件中输出，但我似乎做了一些错误的事情，因为没有任何东西传入它。显然，我在outputUsers（）中访问数组的方式有问题，但我不知道问题出在哪里，也不知道如何使该数组在组件中异步，以便对附近的用户进行实时更新。。非常感谢您的帮助

    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 stuff going on here .....

        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);
    }





    }

从'@angular/core'导入{Injectable，NgZone}；
从“ionic native”导入{Geolocation，Geolocation，BackgroundGeolocation}；
导入'rxjs/add/operator/filter'；
从“./firebase”导入{Fb}；
进口“rxjs/Rx”；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Observer'导入{Observer}；
从“rxjs/AsyncSubject”导入{AsyncSubject}；
导入“rxjs/add/operator/share”；
导入'rxjs/add/operator/map'；
出口类IUSER{
userid:string；
userdistance:string；
userloc:string；
}
@可注射（）
导出类位置跟踪器{
public usersNearMe$：可见；
私有用户nearmeobserver:Observer；
私有_usersNearMeDataStore:{users:Iusers[]}；
公共近距离=[]；
建造商（公共区域：NgZone，公共消防：Fb）{
this.usersNearMe$=新的可观察对象（observer=>this.\u usersNearMeObserver=observer）.share（）；
这个._usersNearMeDataStore={users:[]}；
}
startTracking（activeUser:any）：any{
……这里发生的其他事情。。。。。
geoQuery.on（“输入键”），（键、位置、距离）=>{
this.nearme.push（{userid:key，userloc:location，userdistance:distance.toFixed（2）}）；
});
}
outputUsers（）{
this.\u usersNearMeDataStore.users=this.nearme；
this.\u usersNearMeObserver.next（this.\u usersNearMeDataStore.users）；
}
}

接收到该信息后显示该信息的组件布局如下：

        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();
        }

  ... more stuff...

 }

导出类概览页面{
公众成员：FirebaseListObservable；
public-activeUser:string；
公共用户武器：可观察；
构造器（公共位置跟踪器：位置跟踪器，公共火灾：Fb，af:AngularFire，公共AppHeaderPoverController:AppHeaderPoverController，公共区域：NgZone，公共navCtrl:NavController，公共navParams:navParams）{
this.locationTracker.startTracking（this.activeUser）；
this.locationTracker.usersNearMe$
this.locationTracker.outputUsers（）；
}
…更多的东西。。。
}

和html模板

      <div class="" *ngFor="let item of usersNearMe | async">
        item {{ item.key }}
      </div>

项目{{item.key}

this.\u usersNearMeObserver.next（this.\u usersNearMeDataStore.users）

inside

outputUsers（）

是您从观察者发布值的唯一地方。此代码只调用一次

我猜您希望从

startTracking（）

方法内部发布新值，因为这是获取新值的地方

我不知道您想要达到什么样的结果，但是在这里添加

outputUsers（）

应该在跟踪更改时发布值：

geoQuery.on("key_entered", (key, location, distance) => {
    this.nearme.push({ userid: key, userloc: location, userdistance: distance.toFixed(2) });
    this.outputUsers();
});