Question

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

我希望我的rx流能够：

接受文本输入更改
与subject结合使用，告诉其单击按钮时流获得更多结果（增量限制）
致电服务

我所拥有的作品，除了：

主题发出时，它什么也不做，我希望switchmap能够参与进来，并因此获得服务器响应。

每次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语句记录值在管道中传递时的值。

Angular：文本搜索rxjs问题

1 个答案: