SwitchMap无法按照Angular的要求工作

时间:2019-08-15 14:32:24

标签: angular firebase webstorm

我尝试使用Firebase在Angular 5中构建CMS应用,但在切换映射和用户界面时出现错误

  1. switchmap()无法解析的函数或方法。

  2. 初始化器类型uidemail等不能分配给变量类型User

af.service.ts

import { Injectable } from '@angular/core';
import {AngularFireAuth} from '@angular/fire/auth';
import {Observable, of} from 'rxjs';
import * as firebase from 'firebase/app';
import {AngularFirestore, AngularFirestoreDocument} from '@angular/fire/firestore';
import { switchMap } from 'rxjs/operators';
import { User } from './user';

@Injectable({
  providedIn: 'root'
})
export class AfService {
  user$: Observable<User>;
  constructor( public afAuth: AngularFireAuth,
               public afs: AngularFirestore) {
    this.user$ = afAuth.authState.switchMap(user => {
      if (user) {
        return this.afs.doc<User>(`users/$(user.uid)`).valueChanges();
      } else {
        return of(null);
      }
    });
  }
    loginWithGoogle() {
      const provider = new firebase.auth.GoogleAuthProvider();
      this.afAuth.auth.signInWithPopup(provider).then((credential) => {
        this.updateUser(credential.user);
      });
    }
  updateUser(user) {
      const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/$(user.uid)`);
      const data: User = {
        uid: User.id,
        email: User.email,
        roles: {
          subscriber: true,
          admin: false
        }
      }
      return userRef.set(data, {merge: true});
  }
    logout() {
      this.afAuth.auth.signOut();
    }
}

user.ts

export interface User {
  uid: string;
  email: string;
  displayName: string;
  roles: Roles;
}

export interface Roles {
  subscriber?: boolean;
  admin?: boolean;
}

1 个答案:

答案 0 :(得分:1)

我看到了一些问题,您正在以应在pipe中使用的方式导入switchMap。另外,您还有错别字(?):$(user.uid)应该是${user.uid}。另外,您正在将user传递给updateUser函数,但是您在有效负载中使用了类型 User。另外,由于您必须将displayName包含在有效负载中,太好了...

将两个括号(updateUser()authState)上的圆括号都更改为卷曲:

return this.afs.doc<User>(`users/${user.uid}`).valueChanges();

然后在pipe()内设置switchMap

this.user$ = this.afAuth.authState.pipe(
    switchMap(user => {
        if (user) {
            return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
            return of(null);
        }
    })
);

更改updateUser的有效载荷:

const data: User = {
  uid: user.uid, // should be uid, not id!
  email: user.email,
  displayName: user.displayName
  roles: <Roles>{
    subscriber: true,
    admin: false
  }
}