条件可观察的交互RxJS

时间:2018-10-25 12:05:31

标签: javascript angular typescript rxjs observable

我有以下观察值:

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$的值“设置”回0。正确的RxJS方法是什么?

2 个答案:

答案 0 :(得分: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));

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

答案 1 :(得分: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。