RXJS行为主题在首次加载

时间:2017-02-18 14:06:33

标签: javascript angular ionic2 rxjs

我正在构建一个Ionic 2应用程序,当应用程序加载时,它应该显示您附近的用户,哪个有效,但它显示重复值,我知道这可能是行为主体行为的一部分,因为它显示了初始值接下来会发生什么?有没有办法在所有加载之后显示值...在我脑海中它应该像一个填充的数组,然后才显示它或者它应该在填满时弹出条目

这是我的Service.ts,它使用下一个

将用户推送到组件
import { Injectable, NgZone } from '@angular/core';
import { Geolocation, Geoposition, BackgroundGeolocation } from 'ionic-native';
import { Fb } from './firebase';
import { Observable } from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import { User } from './user';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';

declare var GeoFire: any


@Injectable()
export class LocationTracker {

public firebaseRef: any;
public geoFire: any;
public subject: Subject<any> = new BehaviorSubject(0);

constructor( public zone: NgZone, public fire:Fb, public user:User) {
    this.firebaseRef = this.fb.ref('geofire');
    this.geoFire     = new GeoFire(this.firebaseRef);
}

UsersNearME() : Observable<any> {
    this.nearme.length = 0;
    let geoQuery = this.geoFire.query({
    center: [this.lat, this.lng],
    radius: 4.609 //kilometers
    });
    geoQuery.on("key_entered", (key, location, distance) => {

const sender = this.fb.ref('/users/'+ key  );
    sender.on('value',  (snapshot) => {
        const profile = snapshot.val().profile;
        this.nearme.push({ 
            userid: key,
            userloc: location,
        });
        this.subject.next(this.nearme);
        // 
    }); 
    });
return this.subject.asObservable();
}
}

我的Component.ts如下,基本上订阅了用户服务

    import { Component, NgZone, ChangeDetectorRef, Inject, OnInit } from '@angular/core';
    import 'rxjs/Rx';

    @Component({
    selector: 'members',
    templateUrl: 'members.html'
    })
    export class MembersOverviewPage  implements OnInit {

    public usersNearMe;

    constructor(locationTracker: LocationTracker,
                zone: NgZone,) {
    }

        ngOnInit() {
                this.zone.run(() => {
                    setTimeout(() => {  
                        try {
                            this.locationTracker.UsersNearME().filter(data => data != null).subscribe( data => {
                            if( data ) {
                                    this.usersNearMe = data;
                                    this.loader.dismiss();
                                }
                            }, (error) => {
                                alert("are you online ? ");
                            }, () => {
                            // this.loader.dismiss();
                            });

                        } catch (e) { 
                            console.log( " error "+ JSON.stringify(e));
                        }                           
                    }, 1000);
                });
        }
    }

1 个答案:

答案 0 :(得分:3)

这就是BehaviorSubject的含义,它首先给出那里的值,然后是所有下一个值。如果您不想要第一个值,请将其更改为Subject

public subject: Subject<any> = new Subject();

也许ReplaySubject也适合你:

http://xgrommx.github.io/rx-book/content/subjects/replay_subject/index.html

<强>更新

    this.nearme.push({ 
        userid: key,
        userloc: location,
    });
    this.subject.next(this.nearme);

据我了解这段代码,您使用新值递增数组,并希望将整个数组再次显示给订阅者?如果没有,

    this.subject.next({ 
        userid: key,
        userloc: location,
    });