错误：“Observable<用户>”类型上不存在属性“地图”答案

【问题标题】：Error:Property 'map' does not exist on type 'Observable<User>'错误：“Observable<用户>”类型上不存在属性“地图”
【发布时间】：2020-03-12 10:10:19
【问题描述】：

在我的 Angular-Firebase 在线购物项目中，我使用AuthGuard 来检查用户是否已登录以访问./check-out 和其他链接，如下面的代码所示。由于map 没有在下面的代码中为Observable.User 导入，因此出现错误。使用最新版本的所有内容。 auth.service.ts

import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user$: Observable<firebase.User>;

  constructor(private afAuth: AngularFireAuth) { 
    this.user$=afAuth.authState;
  }

  login(){
    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())
  }
  logout(){
    this.afAuth.auth.signOut()
  }
}

login.component.ts

import { AuthService } from './../auth.service'
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent{

  constructor(private auth: AuthService) { }

  ngOnInit() {
  }

  login(){
    this.auth.login();
  }

}

bs-navbar.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
  selector: 'bs-navbar',
  templateUrl: './bs-navbar.component.html',
  styleUrls: ['./bs-navbar.component.css']
})
export class BsNavbarComponent{

  constructor(public auth: AuthService) {
   }

  logout(){
    this.auth.logout();
  }
}

bs-navbar.component.html

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <a class="navbar-brand" routerLink="/">O</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" routerLink="/shopping-cart">Shopping cart</a>
        </li>
        <ng-template #anonymousUser>
          <li class="nav-item">
            <a class="nav-link" routerLink="/login">Login</a>
          </li>
        </ng-template>
        <li ngbDropdown *ngIf="auth.user$ | async as user; else anonymousUser" class="nav-item dropdown">
          <a ngbDropdownToggle class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{user.displayName}}
          </a>
          <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" routerLink="/my/orders">My Orders</a>
            <a class="dropdown-item" routerLink="/admin/orders">Manage Orders</a>
            <a class="dropdown-item" routerLink="/admin/products">Manage Prodcuts</a>
            <a class="dropdown-item" (click)="logout()">Log Out</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

auth.guard.service.ts

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
import { CanActivate } from '@angular/router';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate{
   constructor(private auth:AuthService, private router: Router) {
   }
   canActivate(): boolean{
   return this.auth.user$.map(user=>{
      if(user) return true;
      this.router.navigate(['./login']);
      return false;
      });
   }
}

return this.auth.user$.map(user=> 行的 auth.guard.service.ts 出现错误。

【问题讨论】：

标签： angular typescript firebase rxjs angularfire2

【解决方案1】：

如果您使用的是最新版本的 RxJS，可能是因为 map 运算符必须像这样使用管道：

return this.auth.user$.pipe(map(user => ...));

你可以在这里看到一个例子：https://www.learnrxjs.io/operators/transformation/map.html

【讨论】：