Question

我正在开发一个基本上用角度2构建的Ionic2应用程序。我遇到了以下observable的问题，它返回了所有靠近的用户..有时当我离开视图然后返回时它会使用户增加一倍重复数据或其他时间它只显示1个结果并且当另一个用户登录时不会更新视图，我似乎无法弄清楚问题是什么，但它是应用程序的一个重要部分，所以我真的需要它是坚实的。

Service.ts

    @Injectable()
    export class LocationTracker {


    public nearme = <[IuserGeoLocation]>[];

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



    constructor( public zone: NgZone, public fire:Fb, public user:User) {
        this.fb          = fire.instance().database();
        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,
                    userdistance: distance.toFixed(2),
                    email: profile.email,
                    name: profile.displayName || 'Anonymous',
                    image: profile.photoURL || ''
                });
                this.space.next(this.nearme);
            }); 
            // console.log("User near you  " + key + " found at " + location + " (" + distance + " km away)");
            });

        return this.space.asObservable();
        }






    }

Component.ts

    public usersNearMe;

    constructor( public locationTracker: LocationTracker ) {
            this.zone.run(() => { 
                 this.usersNearMe = this.locationTracker.UsersNearME();
            });
    }

component.html

    <ion-content padding>
    <!--       <ion-col class="member-item"  (click)="viewUser(member.profile.uid)" width-33 *ngFor="let member of members | async; let i = index" [ngClass]="{ hideme : activeUser === member?.profile.uid }"> -->
    <ion-grid>
        <ion-row class="member-group" >
            <ion-col class="member-item"  tappable  width-33 *ngFor="let m of usersNearMe | async; let i = index">
            {{ m?.userid }}
            </ion-col>
        </ion-row>
    </ion-grid>
    </ion-content>

Answer 1

您的组件未正确设置：

组件：

export class YourComponent implements ngOnInit {
    public usersNearMe;

    constructor( private locationTracker: LocationTracker ) {}

    ngOnInit(){
        this.locationTracker.UsersNearME.subscribe(data => {
            this.usersNearMe = data;
        });
    }
}

Angular 2 Observable Issue重复，不更新结果

1 个答案: