'Observable<any>' 类型上不存在属性 'mergeMap'答案

【问题标题】：Property 'mergeMap' does not exist on type 'Observable<any>''Observable<any>' 类型上不存在属性 'mergeMap'
【发布时间】：2019-02-14 05:39:05
【问题描述】：

我正在 Ionic 4 应用程序中创建一个 HttpInterceptor。我想从local storage 读取承载授权令牌。

我尝试使用 mergeMap 但它总是返回错误：

Property 'mergeMap' does not exist on type 'Observable<any>'

这里是 token.interceptor.ts

的完整代码

import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError, from  } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    token: any;

    constructor(private router: Router, private storage: Storage) {}

    intercept(request: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {

        return from(this.storage.get('User')).mergeMap((val) => {
            if (this.token) {
                request = request.clone({
                    setHeaders: {
                        'Authorization': this.token
                    }
                });
            }

            if (!request.headers.has('Content-Type')) {
                request = request.clone({
                    setHeaders: {
                        'content-type': 'application/json'
                    }
                });
            }

            request = request.clone({
                headers: request.headers.set('Accept', 'application/json')
            });

            return next.handle(request).pipe(
                map((event: HttpEvent < any > ) => {
                    if (event instanceof HttpResponse) {
                        console.log('event--->>>', event);
                    }
                    return event;
                }),
                catchError((error: HttpErrorResponse) => {
                    if (error.status === 401) {
                        if (error.error.success === false) {
                            // this.presentToast('Login failed');
                        } else {
                            this.router.navigate(['/']);
                        }
                    }
                    return throwError(error);
                }));
        })

    }

}

根据this question，我试过这种格式：

return from(...).pipe(mergeMap(...));

但它不起作用。

我应该尝试什么？

【问题讨论】：

相关AngularJS vs Angular
您是否尝试从运营商那里导入mergeMap？
@jcubic 是的，不起作用
除了导入，是的，你可以把它放在pipe()

标签： javascript angular typescript rxjs

【解决方案1】：

您正在使用旧 RxJS API 的语法：

import 'rxjs/operators/mergeMap';
myObs$.mergeMap(anotherObs$);

由于 RxJS API 更改（版本 5.5+），mergeMap 不再是 Observable 上的方法，而是一个函数，您必须在 pipe 运算符中使用它，如下所示：

import { mergeMap } from 'rxjs/operators';
myObs$.pipe(mergeMap(anotherObs$));

【讨论】：

可能值得一提的是从哪里导入 pipable 操作符。

【解决方案2】：

更新您的导入

import { map, catchError, mergeMap } from 'rxjs/operators';

然后你可以在管道中使用mergeMap。

const { of } = rxjs; // Using destructuring over import because of snippets
const { mergeMap } = rxjs.operators;

of(4).pipe(
  mergeMap(val => of(val * 2))
).subscribe(result => {
  console.log(result);
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"&gt;&lt;/script&gt;

【讨论】：

感谢您的回答。不过，我会接受另一个。