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，只需將值放入存儲區並觸發一個操作，該操作將觸發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語句來記錄值，因為它們是通過管道傳遞的。