推至可觀察到的角度

Question

我有一個similarIdeasObservable: Observable<SimilarIdea[]>; Observable的Observable數組： similarIdeasObservable: Observable<SimilarIdea[]>; 和含有10行和綁定到HTML <article class="list-group-item" *ngFor="let similarIdea of (similarIdeasObservable | async)">現在我想進一步10行推入similarIdeasObservable: Observable<SimilarIdea[]>; 通過使用以下方法

  onScrollDown(): void {
    this.loading = true;
    if (this.idea !== null) {
      this.loading = true;
      concat(this.similarIdeasObservable, this.ideaService.getSimilarIdeas(this.idea).pipe(
        concatMap(i => i),
        toArray(),
        catchError(error => {
          this.loading = false;
          return throwError(error);
        }),
        finalize(() => {
          this.loading = false;
        })
      )).subscribe(data => {
        console.log(data);
      });
    }
  }

前10個想法已加載以下代碼

this.similarIdeasObservable = this.ideaService.getSimilarIdeas(idea).pipe(
            concatMap(i => i),
            startWith(idea.toSimilarIdea()),
            toArray(),
            catchError(error => {
              this.loading = false;
              return throwError(error);
            }),
            finalize( () => {
              this.loading = false;
            })
          );

以上方法無效。 您能解決我下次如何將其推入Observable的問題嗎？

Answer 1

在onScrollDown()函數中使用combineLatest運算符：

一個適合您的有效的stackblitz示例 ：

this.similarIdeasObservable = combineLatest(this.similarIdeasObservable,this.ideaService.getSimilarIdeas(this.idea).pipe(...))
        //Merge 2 array returned from two above Observables
        .pipe(map(([first$, second$]) => [...first$, ...second$ ]) 

this.similarIdeasObservable.subscribe(data => {console.log(data);});

但是我注意到，如果您的onScroll()在應用程序中多次調用，可能會導致性能問題，當再次調用它時，您應該取消訂閱先前的訂閱：

onScrollDown(): void {
 if(this.scrollDownSubscriptions) {
    this.scrollDownSubscription.unsubscribe();
 }
 ........
 this.scrollDownSubscription = this.similarIdeasObservable.subscribe( ...);
}

Answer 2

對於rxjs 6+版本，

concat的工作方式如下：

import { concat } from 'rxjs';
concat(observable1, observable2, observable3 ...);

應該是這樣的：

concat(
    this.similarIdeasObservable,
    this.ideaService.getSimilarIdeas(this.idea).pipe(...)
)

參考： 文檔