为什么我会收到此错误？类型“ Observable <boolean>”上不存在属性“ map”

编程问答 2022-06-09

问题描述

我正在开发实现AuthGuard类的Angular应用程序，以避免未登录的用户可以访问受保护的页面。我完成了在线课程后：

import { CanActivate,ActivatedRouteSnapshot,RouterStateSnapshot,Router } from '@angular/router';

import { AuthService } from './auth.service';
import 'rxjs/Rx';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs';

export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,private router:Router) {}

  canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean>  {

    return this.authService.authInfo$
                           .map(authInfo => authInfo.isLoggedIn())
                           .take(1)
                           .do(allowed => {
                             if(!allowed) {
                               this.router.navigate(['/login']);

                             }
                           })
  }

}

在我的 AuthService 类中，我仅定义了以下属性：

authInfo$:Observable<boolean>;

问题在于，在我的 AuthGuard 类中，IDE在此行上给我以下错误：

.map(authInfo => authInfo.isLoggedIn())

错误是：

“可观察”类型上不存在属性“地图”。ts（2339）

我不明白为什么，因为，正如您在我的代码中看到的那样，我已经导入了 import'rxjs / add / operator / map'运算符。

怎么了？我想念什么？我该如何解决这个问题？

解决方法

您应该添加pipe .pipe（map（）...）

this.authService.authInfo$
                          .pipe(
                           map(authInfo => authInfo.isLoggedIn()),take(1),do(allowed => {
                             if(!allowed) {
                               this.router.navigate(['/login']);

                             }
                           })
                          ) // pipe ends
,

在较早的代码示例中，您仍然可以看到rxjs像这样：

observable$
  .map(val => mapToSomething(val))

但是，在最新版本的rxjs中，您必须在管道中使用运算符：

// Make sure to import the operator!
import { map } from 'rxjs/operators';

observable$
  .pipe(
    map(val => mapToSomething(val))
)
angularangularrxjsrxjsrxjs-observablestypescripttypescripttypescript