Angular 2可觀察問題重複，而不是更新結果

Question

我正在使用基本上使用angular 2構建的Ionic2應用程序。我遇到以下可觀察事件的問題，它返回所有靠近的用戶..有時，當我離開查看，然後返回它使用戶通過重複數據或其他時間雙打它只顯示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; 
     }); 
    } 
}