rxjs switchMap 类型不匹配问题

Question

我正在尝试在我的应用程序中使用 ng-bootstrap 实现提前输入。我正在关注 wikipedia example，它使用 WikipediaService 获取数据。

我在我的应用程序中实现了类似的功能，但我在 rxjs.

的 switchMap 函数中遇到类型不匹配问题

来自 ng-bootstrap 的示例：

search = (text$: Observable<string>) =>
  text$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    tap(() => this.searching = true),
    switchMap(term =>
      this._service.search(term).pipe(
        tap(() => this.searchFailed = false),
        catchError(() => {
          this.searchFailed = true;
          return of([]);
        }))
    ),
    tap(() => this.searching = false)
  )

我的问题是，当我尝试实现这个时，switchMap 中的 term 是 Observable<{}> 而不是 string，所以我无法通过为我服务。

如何从可观察对象中获取实际值以传递给我的服务？

我的版本：

search = (text$: Observable<string>) =>
  text$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    tap(() => this.searching = true),
    switchMap(term =>
      this.placeService.search(term).pipe(  // [ts] Argument of type 'Observable<{}>' is not assignable to parameter of type 'string'. 
        tap(() => this.searchFailed = false),
        catchError(() => {
          this.searchFailed = true;
          return of([]);
        })
    ),
    tap(() => this.searching = false))
  )

更新 1

StackBlitz Demo。如果您查看 app\app.component.ts，您会收到 TS linting 错误。

Answer 1

根据我的评论，您遇到了括号问题。 Here it is, working.

/*
  Observables are streams that can be monitored. It means that when you 
  subscribe to it, everytime a value is emitted, your subscribe function 
  will be triggered (or in this case, the pipe functions, because you
  subscribe to search() in another component)
*/
search(text$: Observable<string>) {
  return text$
    // pipe = perform operations on the value before sending it to subscribe
    .pipe(
      // debounceTime = wait 300ms before emitting. If a new value is emitted,
      // cancel the previous one
      debounceTime(300),
      // distinctUntilChanged = if the value is the same as the previous one, cancel
      distinctUntilChanged(),
      // tap = perform an operation without touching the value emitted
      tap(() => this.searching = true),
      // switchMap = cancel previous HTTP requests if they're not finished
      switchMap(term => this.placeService.search(term).pipe(
      tap(() => this.searchFailed = false),
      // catchError = self-explanatory :)
      catchError(() => {
        this.searchFailed = true;
        return of([]);
      })
    )),
      tap(() => this.searching = false)
    )
};

rxjs switchMap 类型不匹配问题

rxjs switchMap type mismatch issue

rxjs

ng-bootstrap

angular