输入'无效| Observable<any>' 不可分配给类型 'ObservableInput<any>'。类型 'void' 不可分配给类型 'ObservableInput<any>'答案

【问题标题】：Type 'void | Observable<any>' is not assignable to type 'ObservableInput<any>'. Type 'void' is not assignable to type 'ObservableInput<any>'输入'无效| Observable<any>' 不可分配给类型 'ObservableInput<any>'。类型 'void' 不可分配给类型 'ObservableInput<any>'
【发布时间】：2021-12-10 12:17:21
【问题描述】：

我在 Visual Studio 代码中遇到了这个错误：

类型参数 '(query: string) => void |可观察的'不是可分配给 '(value: string, index: number) => 类型的参数可观察输入'。输入'无效|可观察的'不是可分配给类型“ObservableInput”。类型“void”不可分配给类型“ObservableInput”

校验码：

  public searchVal(val: string) {
    this.suggestions = (new Observable((observer: Observer<string>) => {
      observer.next(val);
    })).pipe(
      switchMap((query: string) => {
        if (query) { 
          return this.returnApiCall(query);  //THIS IS WORK WITH ONLY ONE RETURN
        }
        return of([]);
      })
    );
  }

但是这不适用于 if ：

  public searchVal(val: string) {
    this.suggestions = (new Observable((observer: Observer<string>) => {
      observer.next(val);
    })).pipe(
      switchMap((query: string) => {
        if (query) { 
          if(this.serverApi === 'Driver'){
             return this.getAllDrivers(query);
          }else if(this.serverApi === 'Vehicle'){
             return this.getVehicle(query);
           }
        }
        return of([]);
      })
    );
  }

当我尝试返回其他一些 API 调用不起作用时？

我的 api 调用是：

  returnApiCal(query: string) {
    return this.accountsService.getDrivers(query)
      .pipe(
        map((data: any) => {  
          return data.body || [];
        }),
        tap(() => noop, err => {
          this.errorMessage = err && err.message || 'Something goes wrong';
        })
      )
  }

这条线是红线：

  switchMap((query: string) => { //here

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

确保你的 switchMap 的回调函数总是返回一些东西：

 public searchVal(val: string) {
    this.suggestions = (new Observable((observer: Observer<string>) => {
      observer.next(val);
    })).pipe(
      switchMap((query: string) => {
        if (query) { 
          if(this.serverApi === 'Driver'){
             return this.getAllDrivers(query);
          }else if(this.serverApi === 'Vehicle'){
             return this.getVehicle(query);
           }
          else { // you need to provide else here
            // return an observable when the two above conditions were not satisfied
          }
        }
        return of([]);
      })
    );
  }

【讨论】：

【解决方案2】：

make always void & 添加变量到服务类：

data = new BehaviorSubject<YOUT_TYPE|null>(null);

现在订阅中只需致电：

this.data.next(dataFromAnotherVariable);

现在你可以从 ts 文件订阅这个 var 或者在 html 模板中创建异步管道

【讨论】：