Angular: текстовый поиск rxjs проблема - PullRequest
Новая
       6

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

0 голосов
/ 05 сентября 2018

Я создаю поиск в 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);
}

1 Ответ

0 голосов
/ 05 сентября 2018

Насколько я вижу, 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 для записи значений, передаваемых по каналу.

...