为啥我会收到此错误？ 'Observable<boolean>' 类型上不存在属性 'map'

Posted 2023-03-13

【中文标题】为啥我会收到此错误？ \'Observable<boolean>\' 类型上不存在属性 \'map\'

【英文标题】：Why I obtain this error? Property 'map' does not exist on type 'Observable<boolean>'为什么我会收到此错误？ 'Observable<boolean>' 类型上不存在属性 'map'

【发布时间】：2021-01-22 18:07:57

【问题描述】：

我正在开发一个实现 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' 运算符。

怎么了？我错过了什么？我该如何解决这个问题？

【参考方案1】：

您应该添加pipe .pipe(map()...)

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

                             
                           )
                          ) // pipe ends

【讨论】：

试过你最想做什么......但同样的问题......你能告诉我代码吗？也许我的错了：-/

@AndreaNobili 我添加了示例

【参考方案2】：

在旧代码示例中，您仍然可以看到 rxjs 流程如下：

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

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

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

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