Блог

Главная - Вопросы по программированию - Почему я получаю эту ошибку? Свойство ‘map’ не существует для типа ‘Observable’

Почему я получаю эту ошибку? Свойство ‘map’ не существует для типа ‘Observable’

#angular #typescript #rxjs #rxjs-observables

#angular #typescript #rxjs #rxjs-наблюдаемые

Вопрос:

Я работаю над приложением Angular, реализующим класс AuthGuard, чтобы избежать того, чтобы незарегистрированный пользователь мог получить доступ к защищенной странице. После онлайн-курса, который я сделал:

 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())

ошибка:

Свойство ‘map’ не существует для типа ‘Observable’.ts(2339)

И я не могу понять почему, потому что, как вы можете видеть в моем коде, я ввел оператор импорта ‘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

Комментарии:

1. Пробовал то, что вы предлагаете сделать … но та же проблема … можете ли вы показать мне код? возможно, мое неверно :-/

2. @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))
)