代码之家 › 专栏 › 技术社区 › Sanjeewa

Uncaught(在promise中):TypeError:this.auth.user$.map不是函数

angular6 typescript javascript

1

Sanjeewa · 技术社区 · 6 年前

我是Angular的新手,在进行开发时,下面的代码运行良好(我使用Visual Studio代码作为代码编辑器)

当我单击下面的菜单链接时,控制台窗口中出现错误

ng版本=“6.0.9”

npm list --depth=0 
+-- rxjs@6.2.2
+-- rxjs-compat@6.2.2

ERROR Error: Uncaught (in promise): TypeError: this.auth.user$.map is not a function
TypeError: this.auth.user$.map is not a function
    at AuthGuard.push../src/app/auth-guard.service.ts.AuthGuard.canActivate (auth-guard.service.ts:22)
    at MapSubscriber.project (router.js:2768)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at Observable._subscribe (subscribeToArray.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
    at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:23)
    at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)
    at AuthGuard.push../src/app/auth-guard.service.ts.AuthGuard.canActivate (auth-guard.service.ts:22)
    at MapSubscriber.project (router.js:2768)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at Observable._subscribe (subscribeToArray.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
    at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:23)
    at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

代码出现错误:auth-guard.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

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

  canActivate(route, state: RouterStateSnapshot) {
    return this.auth.user$.map(user => {
      if (user) return true; 

      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
      return false;
    });
  }

}

auth.service.ts代码

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  user$: Observable<firebase.User>;

  constructor(private afFireAuth: AngularFireAuth,private route: ActivatedRoute) {
    this.user$ = afFireAuth.authState;
  }

  login(){
    let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
    localStorage.setItem('returnUrl', returnUrl);


    this.afFireAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider);
  }

  logout() {

    this.afFireAuth.auth.signOut();
  }

}

我期待所有专家的解决方案

3 回复 | 直到 6 年前

1

2

Vijay Dhanvai 6 年前

该问题是由于Angular 6的更新版本地图语法。你需要换衣服进口陈述和使用 .管道 地图的角度是6。

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

@Injectable()
export class AuthGuard implements CanActivate{

  constructor(private auth: AuthService, private router: Router) { }
  canActivate() {
     return this.auth.user$.pipe(map (
       user => {
      if ( user ) return true;

      this.router.navigate(['/login']);
      return false;
    }
    ));
  }
}

2

0

Sanjeewa 6 年前

auth-guard.service.ts需要更改为

import { Injectable } from '@angular/core';
import { CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

//import { Observable } from "rxjs/Rx";
//import { map } from 'rxjs/operators';

import 'rxjs/add/operator/map'; 

....
export class AuthService {
 ....
}

3

0

Prateek Chitransh 6 年前

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
import { map } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate{

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

  canActivate(){
    return this.auth.user$.pipe(map(user=>{
      if(user){
        return true;
      }
      else {
        this.router.navigate(['/login']);
        return false;
      }
    }));
  }

}