条件可观察的交互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$ searchValue$将cardAmount$的值“设置”回0。 正确的RxJS方法是什么？

Answer 1

据我所知，您不能使用此代码。

为此，您将需要同时充当可观察者和观察者的代理。 否则，您将无法在流中发出值。

尝试使用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));

我略微更改了最后一个观察者，因为如果您不保留并保留上一个观察者，则计数值将不会在意值更改的重置。 为确保它确实有效，您必须使用观察者的当前值。

Answer 2

听起来像是switchMap运算符的完美案例：

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

每个searchValue发射将生成一个从0开始的新Observable。