Rx js обновить список в зависимости от двух наблюдаемых

Question

Итак, в основном я пытаюсь обновить массив для его отображения, одна из наблюдаемых - это объект поведения, который начинается как пустой массив, а затем получает новое значение из HTTP-запроса, другой источник событий из пагинатора материала Angular, желаемое поведение - обновлять список, если первая наблюдаемая получает новый массив или вторая генерирует событие для изменения страницы.

Первая вещь, которую я пытаюсь было:

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

Звучит как работа для combineLatest Пожалуйста, попробуйте с этим изменением кода.

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

Answer 2

Я думаю, что ваш первый подход имеет смысл, но просто нужно this.paginator.page, чтобы иметь исходное значение для излучения. Я предлагаю обернуть его следующим образом:

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

используйте вместо этого this.page для внешнего потока, тогда у вас всегда будет начальное значение и вы также получите уведомление об обновлениях

Answer 3

Вы можете использовать оператор startWith, который будет выдавать значение (по умолчанию - ноль), даже если наблюдаемый источник не выдал первое значение.

Из документации Rx Js:

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
  );
}