RxJS:forkJoin似乎不起作用

时间:2018-02-04 16:59:50

标签: javascript typescript rxjs

我目前正在使用combineLatest()方法获取所有朋友并将其作为列表。但是,当我尝试从头开始删除项时,它会产生排序问题。 (视图无法正确呈现)因此,我想立即从combineLatest()切换到forkJoin()以获取所有朋友。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';

friends$: Observable<User[]>;

getMyFriendList() {
  this.friends$ = this.userService.getMyFriendsId().switchMap(friendKeys => {
    return Observable.forkJoin(friendKeys.map(user => this.userService.getFriends(user.key)));
  });
}

但是当我调用forkJoin()时没有任何反应。我在这里做错了什么?

getMyFriendsId() {
  let friendRef = this.getFriendRef(this.currentUserId);
  this.friends$ = friendRef.snapshotChanges().map(actions => {
    return actions.map(a => ({ key: a.payload.doc.id, ...a.payload.doc.data()}));
  });
  return this.friends$;
}

getFriends(uid: string) {
  return this.getUsersRef(uid).valueChanges();
}

修改

当登录用户删除好友列表中的另一个用户时,

getMyFriendsId()会更新新数据。

<ion-list>
    <ion-list-header>Friends <span class="total-friends"></span></ion-list-header>
      <ion-item-sliding *ngFor="let user of friends$ | async">
        <ion-item *ngIf="user" (click)="viewUserProfile(user)">
          <ion-avatar (click)="showOriginalAvatarImage()" item-start>
            <img-loader [src]="user.thumbnailURL" [spinner]="true"></img-loader>
          </ion-avatar>
          <h2>{{user.displayName}}</h2>
          <p>{{user.statusMessage}}</p>
        </ion-item>
             ...
<ion-list>

生命周期事件

ionViewWillEnter() {
  // Runs when the page is about to enter and become the active page.;
  this.getMyFriendList();
}

1 个答案:

答案 0 :(得分:1)

.forkJoin()组合了所有可观察对象,并且只有所有可观察对象完成时才会发出值。您的代码不起作用的原因是因为您正在使用valueChanges(),并且它是一种永远无法完成的事件 - 它们永远在听取值的更改!

如果您真的想使用.forkJoin(或证明要点),请在take(1)中添加valueChanges

getFriends(uid: string) {
  return this.getUsersRef(uid).valueChanges().take(1);
}

上面的代码会起作用,因为它强有力地完成带有take()的observable,但显然会失败,因为你的代码只会工作一次。结论是,如果您想继续观察特定值的变化,并将其与另一个可观察值相结合,是的,请使用combineLatest()