Angular:文本搜索 rxjs 问题

Question

我正在 Angular 6 中创建搜索。我的直播遇到了困难。

我希望我的接收流:

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，只需将值放入存储中并触发一个操作，该操作将触发 reducers 将其在下一轮增加 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 语句来记录在管道中传递的值。