时间戳

首页 > 解决方案 > 将结果添加到已经订阅的现有 observable

angular - 将结果添加到已经订阅的现有 observable

问题描述

我有一个可观察的工作数组，它在onInit方法中膨胀： 

jobs$: Observable<Job[]>;
  searchJob(text) {
    this.jobs$ = this.jobService.searchJobs(text, this.page).pipe(
      tap(() => this.page =+ 1),
      tap(() => this.searchJobValue = text),
      tap((res: HttpResponse<Job[]>) => this.countJobs = getPaginationTotalElements(res)),
      map((res: HttpResponse<Job[]>) => res.body),
    );
  }

然后，当有人想要加载更多工作时，我会发出第二个请求，该请求保留在变量 a 中：

loadMore() {
    const a = this.jobService.searchJobs(this.searchJobValue, this.page).pipe(
      tap(() => this.page =+ 1),
      map((res: HttpResponse<Job[]>) => res.body),
    );
  }

如何将结果添加a到，this.jobs$以便我能够以这种方式订阅该源：

<ng-container *ngIf="(jobs$ | async) as jobs">

我尝试了很多东西，包括forkJoin, combineLatest, flatMap但在大多数情况下我最终选择了 ie。数组数组。有没有人有任何好的提示来解决这个问题？

标签： angularrxjsobservable

解决方案

由于a$它是一个 Observable，您可以简单地使用forkJoin来组合两个 Observable，如下所示。

loadMore() {
    this.page += 1;

    const a$ = this.jobService.searchJobs(this.searchJobValue, this.page).pipe(
        map((res: HttpResponse<Job[]>) => res.body),
    );

    this.jobs$ = forkJoin(this.jobs$, a$).pipe(
        map(([jobs, a]) => [...jobs, ...a])
    );
}

此外，正如@Joep 在他的回答中已经提到的那样，tap通常用于日志记录，因此最好将该逻辑移到其他地方。将它完全移到 Observable 之外应该可以工作。它也应该是this.page += 1而不是this.page =+ 1。后者只是分配1给，this.page而前者相当于this.page = this.page + 1。

推荐阅读