Angular: текстовый поиск rxjs проблема

Question

Я создаю поиск в Angular 6, Мне тяжело с моим потоком.

Я хочу, чтобы мой поток RX:

1. Принимает изменения ввода текста
2. Объединить с subject который сообщает потоку, чтобы получить больше результатов (предел приращения) при нажатии кнопки
3. Позвоните в сервис

Какие у меня работы, кроме:

1. Когда субъект излучает, он ничего не делает, я ожидал switchmap пнуть и таким образом получить ответ сервера..

2. Как я могу увеличить предел каждый раз, когда subject испускает на 10?

   searchInput: FormControl = new FormControl();
   showMore$: Subject<number> = new Subject();
   
   ngOnInit() {
   this.searchInput
       .valueChanges
       .pipe(
           debounceTime(300),
           distinctUntilChanged(),
           withLatestFrom(this.showMore$.pipe(startWith(10), tap(val => {
               //how to increment the value here?
           }))),
           //switchmap not called when showMore$ emits...
           switchMap(([searchTerm, limit]) => {
               return this.myservice.search(searchTerm, limit)
           }),
       )
       .subscribe(response => {
           this.results = response;
       });
   }
   
   showMore(): void {
       this.showMore$.next(10);
   }
   

Answer 1

Насколько я вижу, switchMap должен работать как есть, хотя вы, возможно, захотите включить в него некоторую обработку ошибок.

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

.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  // get the value from the store using an ngrx selector
  withLatestFrom(this.store.pipe(select(selectValue))),
  switchMap(([searchTerm, limit]) => {
    // essential to catchError else an HTTP error response will disable this
    return this.myservice.search(searchTerm, limit).pipe(
      catchError(() => {
        return of('an error string which will be passed down the pipe on an error')
      })
    )
  }),
  tap(() => this.store.dispatch(new IncrementValueByTenAction()))
)

Кроме того, используйте множество операторов tap для записи значений, когда они передаются по конвейеру.