Rxjs 根據兩個 observable 更新列表

Question

所以基本上我想要做的是更新一個數組來顯示它，其中一個 observables 是一個 Behavior 主題，它以一個空數組開始，然后它從 HTTP 請求中獲取一個新值，另一個是一個事件發射器從 Angular material paginator 中，如果第一個 observable 獲得一個新數組，或者如果第二個 observable 發出一個事件來更改頁面，則所需的行為是更新列表。

我首先嘗試的是：

connect(): Observable<Transaction[]> {
     return this.paginator.page.pipe(
    map(() => {
       return this.list.pipe(map(t => this.getPagedData(t)));
    }),
    switchMap(m => m) // or mergeMap
);
}

它有點工作，問題是它第一次不發出任何東西，因為它等待外部可觀察對象發出一些東西，然后它就起作用了。

然后我嘗試

return merge(this.list, this.paginator.page).pipe(
  map(x => this.getPagedData(x[0])),
);

但是這個似乎只在數組為空時第一次發出

Answer 1

您可以使用startWith運算符，即使源 observable 沒有發出第一個值，它也會發出一個值（默認為 null）。

來自 RxJs 文檔：

startWith - 返回一個 Observable，它在開始發出之前發出您指定為參數的項目。

所以你會有這樣的事情

connect(): Observable<Transaction[]> {
   return this.paginator.page.pipe(
      startWith(),
      map(() => this.list.pipe(map(t => this.getPagedData(t))),
      switchMap(m => m) // or mergeMap
  );
}

Answer 2

聽起來像combineLatest的工作 請嘗試更改此代碼。

return combineLatest(this.list, this.paginator.page).pipe(
  map(x => this.getPagedData(x[0])),
);

Answer 3

我認為你的第一種方法是有道理的，但只需要this.paginator.page有一個初始值來發射。 我建議像下面這樣包裝它

this.page=this.paginator.page.pipe(startWith(1),shareReplay(1))

將this.page用於外部流，然后您總是有一個起始值並通知更新