从服务中的数组创建异步 Observable 并输出到模板答案

【问题标题】：Creating Async Observable from array in a service and outputing to template从服务中的数组创建异步 Observable 并输出到模板
【发布时间】：2017-06-30 20:18:09
【问题描述】：

我正在构建一个地理定位应用程序，当用户登录时，他们的位置被添加，并且他们通过从 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);
    }





    }

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

        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...

 }

和html模板

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

【问题讨论】：

标签： javascript angular typescript ionic2 rxjs

【解决方案1】：

this._usersNearMeObserver.next(this._usersNearMeDataStore.users); 内的outputUsers() 是您从观察者发布值的唯一地方。这段代码只调用了一次。

我的猜测是，您想从 startTracking() 方法中发布新值，因为这是您获取新值的地方。

我不确切知道您要达到什么结果，但是在此处添加 outputUsers() 应该会在您跟踪更改时发布值：

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

【讨论】：