條件可觀察的交互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。