Angular 2可观察问题重复,而不是更新结果
问题描述:
我正在使用基本上使用angular 2构建的Ionic2应用程序。我遇到以下可观察事件的问题,它返回所有靠近的用户..有时,当我离开查看,然后返回它使用户通过重复数据或其他时间双打它只显示1结果,并没有更新视图时,另一个用户登录,我似乎无法弄清楚是什么问题,但它的应用程序的重要部分,所以我真的需要它坚实。Angular 2可观察问题重复,而不是更新结果
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>
答
您的组件是不是真的正确设置:
组件:
export class YourComponent implements ngOnInit {
public usersNearMe;
constructor(private locationTracker: LocationTracker) {}
ngOnInit(){
this.locationTracker.UsersNearME.subscribe(data => {
this.usersNearMe = data;
});
}
}
使用订阅不会允许我使用异步的ngfor虽然 – Kravitz
@REPTILE看到这种方法如何票价不异步管道。 – chrispy
是的,但它是实时的:)我有点想让它实时更新,因为人们进入你的位置,但我想我必须牺牲它。 – Kravitz