使用AngularFireObject和switchMap

Question

我真的不知道该如何解决。如何解决此错误？

in user.service.ts:
import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';

import {AppUser} from './models/app.user';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';

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


  constructor(private db: AngularFireDatabase) { }

  save(user: firebase.User) {
    this.db.object('/users/' + user.uid).update({
      name: user.displayName,
      email: user.email
    });
  }

  get(uid: string): AngularFireObject<AppUser> {
    return this.db.object('/users/' + uid);
  }



in admin-auth-guard.service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/operator/map';
import { UserService } from './user.service';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';



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

  constructor(private auth: AuthService, private userService: UserService) { }

   canActivate (): Observable<boolean> {
     return this.auth.user$
      .switchMap(user => this.userService.get(user.uid))<-- ERROR HERE
      .map (appUser => appUser.isAdmin);
    }
}

类型'（user：User）=> AngularFireObject'的参数不能分配给类型'（value：User，index：number）=> ObservableInput <{}>'的参数。无法将类型“ AngularFireObject”分配给类型“ ObservableInput <{}>”。类型“ AngularFireObject”不可分配给类型“ Iterable <{}>”。类型“ AngularFireObject”中缺少属性“ [Symbol.iterator]”。

谢谢。

Answer 1

我找到了答案：

user.service.ts:

import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';

import {AppUser} from './models/app.user';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';

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


  constructor(private db: AngularFireDatabase) { }

  save(user: firebase.User) {
    this.db.object('/users/' + user.uid).update({
      name: user.displayName,
      email: user.email
    });
  }

  get(uid: string): AngularFireObject<AppUser> {
      return this.db.object('/users/' + uid);
  }

}

In admin-auth-guard.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/operator/map';
import { UserService } from './user.service';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';




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

  constructor(private auth: AuthService, private userService: UserService) { }

   canActivate(): Observable<boolean> {
      return this.auth.user$
      .pipe(switchMap(user => this.userService.get(user.uid).valueChanges())))
      .pipe(map (appUser => appUser.isAdmin)));
     }
}

谢谢大家！

Answer 2

对于Angular 6，请执行以下操作：

user.service.ts:

import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';

import {AppUser} from './models/app.user';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';

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


  constructor(private db: AngularFireDatabase) { }

  save(user: firebase.User) {
    this.db.object('/users/' + user.uid).update({
      name: user.displayName,
      email: user.email
    });
  }

  get(uid: string): AngularFireObject<AppUser> {
      return this.db.object('/users/' + uid);
  }

}



In admin-auth-guard.service.ts:


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

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

  constructor(private auth: AuthService, private userService: UserService) { }

  canActivate(): Observable<boolean> {
    return this.auth.user$
    .pipe(switchMap(user => this.userService.get(user.uid).valueChanges()))
    .pipe(map(appUser => appUser.isAdmin));
   }

}

Answer 3

对于 RxJS 6 及更高版本，您需要以不同的方式导入和使用 Observable、map、switchMap：

admin-auth-guard.service.ts:
import { Injectable } from '@angular/core';
import { map, switchMap } from 'rxjs/operators'
import { Observable } from 'rxjs';
import { UserService } from './user.service';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

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

  constructor(private auth: AuthService, private userService: UserService) { }

  canActivate(): Observable<boolean> {
    return this.auth.user$.pipe(
      switchMap(user => this.userService.get(user.uid).valueChanges()),
      map (appUser => appUser.isAdmin)
    )
  }
}