Условное наблюдаемое взаимодействие RxJS

Question

У меня есть следующие наблюдаемые:

this.searchValue$ = this.searchValue.valueChanges.pipe(
  startWith(''),
  debounceTime(500)
);

this.cardAmount$ = fromEvent(this.button.nativeElement, 'click').pipe(
  startWith(0),
  scan(count => count + 20, 0)
);

Чтобы добавить немного больше контекста к коду: searchValue$ относится к изменениям поля ввода и выдает измененное значение.cardAmount$ относится к нажатию кнопок.Каждый раз, когда вы нажимаете кнопку, она выдает новое значение 20, 40, 60 и т. Д.

Я бы хотел «установить» значение cardAmount$ обратно на 0 после того, как searchValue$ испущено.Как правильно это сделать RxJS?

Answer 1

Звучит как идеальный случай для оператора switchMap:

this.cardAmount$ = this.searchValue$
.pipe(switchMap( search =>
  fromEvent(this.button.nativeElement, 'click')
   .pipe(
    startWith(0),
    scan(count => count + 20, 0)
)));

Новый Наблюдаемый, начинающийся с 0, будет генерироваться при каждом излучении searchValue.

Answer 2

Вы не можете с этим кодом (насколько я знаю).

Для этого вам понадобится прокси-сервер, который действует как наблюдаемый и как наблюдатель.В противном случае вы не сможете создать значение в своем потоке.

Попробуйте с BehaviorSubject:

this.searchValue$ = this.searchValue.valueChanges.pipe(
  startWith(''),
  debounceTime(500),
  tap(() => this.cardAmount.next(0)),
);

this.cardAmount$ = new BehaviorSubject(0);

fromEvent(this.button.nativeElement, 'click').pipe(
  startWith(0),
  switchMap(() => this.cardAmount$),
).subscribe(curr => this.cardAmount$.next(curr + 20));

Я немного изменил последнего наблюдателя, потому что если вы этого не сделаете и сохраните свой предыдущийВо-первых, значение счетчика не будет заботиться о сбросе изменений значения.Чтобы быть уверенным, вам нужно использовать текущее значение наблюдателя.