【问题标题】:Angular 6: Property 'catch' does not exist on type 'Observable<Response>'?Angular 6:“Observable<Response>”类型上不存在属性“catch”?
【发布时间】:2018-11-30 17:08:04
【问题描述】:

我正在将我的应用升级到 Angular 6。我正在从 Angular 4 升级,但下面的代码在 Angular 6 中导致错误,而它在 Angular 4 中运行良好。


我得到的错误:

“typeof Observable”类型上不存在属性“of”

错误:“Observable”类型上不存在属性“catch”

我应该如何解决这些错误?

  private authInterceptor(observable: Observable<Response>): Observable<Response> {
    return observable.catch((error, source) => {
      if (error.status == 401) {
        this.router.navigateByUrl('/login');
        return Observable.of();
      } else {
        return Observable.throw(error);
      }
    });
  }

【问题讨论】:

    标签: angular rxjs angular6 rxjs6 angular-observable


    【解决方案1】:

    需要导入catch操作符

    import 'rxjs/add/operator/catch';
    

    【讨论】:

    • 我添加了 import 'rxjs/add/operator/catch';但它不起作用。
    • 你正在使用哪个 rxjs 版本
    【解决方案2】:
    import 'rxjs/add/operator/catch';
    

    或者以这种方式导入 Observable:

    import {Observable} from 'rxjs';
    

    【讨论】:

    • 比尝试 import { Observable } from 'rxjs';
    【解决方案3】:

    您需要导入您正在使用的所有运算符。

    import 'rxjs/add/observable/of';
    import 'rxjs/add/observable/throw';
    import 'rxjs/add/operator/catch';
    

    【讨论】:

      【解决方案4】:

      由于您标记了您的问题 rxjs6,我假设升级到 Angular 6 包括升级到 rxjs6。在这种情况下,它不起作用,因为可观察对象上的方法现在是可以使用 pipe() 应用的独立运算符。此外,进口也发生了变化。有关详细信息,请参阅migration guide

      使用 rxjs6 应该如下所示:

      import { Observable, EMPTY, throwError } from 'rxjs';
      import { catchError } from 'rxjs/operators';
      
      private authInterceptor(observable: Observable<Response>): Observable<Response> {
         return observable.pipe(
             catchError( err => {
                  if (err.status == 401) {
                      this.router.navigateByUrl('/login');
                      return EMPTY;
                  } else {
                      return throwError(err);
                  }
             })
         );
       }
      

      【讨论】:

      • 我正在使用这样的管道,无法使 catchError 工作,怎么了?public login(params:object) { this.loading.show(null); return this.http.post(this.config.server + this.config.login, params).pipe(map(response=>{ this.loading.hide(); let authResponse = new AuthenticationResponseModel(response); return authResponse; })); }
      • @LuisParada 看起来你忘记包含 catchError 了?至少它不在你粘贴的代码中
      • catchError 在代码中,我无法粘贴所有代码,在 NS 打字稿中,添加到评论中很长。
      • 我需要在代码的“pipe(map()”段中添加catchError,并且不能让它工作,我尝试在map函数的第二个括号后添加“,”它接受结构,但我收到一个问题,即返回的对象不是我正在创建的类型。}
      • 公共登录(参数:对象){ this.loading.show(null); return this.http.post(this.config.server + this.config.login, params).pipe(map(response=>{ this.loading.hide(); let authResponse = new AuthenticationResponseModel(response); return authResponse; }), catchError((err) => { this.handleErrors(err); return err; }) ); }
      【解决方案5】:

      我假设您已迁移到 RXJS6,因为您也已迁移到 angular6。

      在 RXJS6 中,使用 catch Error 而不是 catch 如所见 here

        import {catchError } from 'rxjs/operators';
        import { Observable, of } from 'rxjs';
      

      【讨论】:

        【解决方案6】:

        使用以下方法导入库并重新排列代码

        import { catchError } from 'rxjs/operators';
        return Observable.pipe(catchError =>...);
        

        这对我有用。

        【讨论】:

          【解决方案7】:

          这对我有用,我正在使用 Angular 6.1.0。

          import { Observable, Subject, of } from 'rxjs';
          import { switchMap, debounceTime, distinctUntilChanged, catchError } from 'rxjs/operators';
          
          this.ofertas = this.subjectPesquisa // Retorno Oferta[]
            .pipe(debounceTime(1000)) // Executa a ação do switchMap após 1 segundo
            .pipe(distinctUntilChanged()) // Apenas executa a ação switchMap se o termo enviado for outro
            .pipe(switchMap((termo: string) => {
          
              if (termo.trim() === '') {
                // Retornar um observable de array de ofertas vazio.
                return of<Oferta[]>([]);
              }
          
              console.log('Requisição HTTP para api: ', termo);
              return this.ofertasService.pesquisaOfertas(termo);
            }))
            .pipe(catchError((err: any) => {
              console.log('Erro: ', catchError);
              return of<Oferta[]>([]);
            }));
          

          【讨论】:

            【解决方案8】:

            首先使用以下命令安装 rxjs 包

            npm i rxjs-compat
            

            然后使用

            导入库
            import 'rxjs/add/operator/catch';
            

            或者以这种方式导入 Observable:

            import {Observable} from 'rxjs/Rx';
            

            但在这种情况下,您需要导入所有运算符。

            从以下链接获取 https://code-examples.net/en/q/235b329

            【讨论】:

            • rxjs-compat 不是永久性的。从 rxjs 5 到 6 迁移只是很麻烦。这将工作很短的时间,直到 compat 消失
            猜你喜欢
            • 2016-12-01
            • 2018-02-01
            • 2016-10-31
            • 2016-09-09
            • 2016-08-25
            • 1970-01-01
            • 2018-11-25
            相关资源
            最近更新 更多