Angular 中的 SwitchMap 未按预期工作

Question

我尝试在 Angular 5 中使用 Firebase 构建 CMS 应用程序，但在开关映射和用户界面中出现错误

switchmap() 无法解析的函数或方法。
初始化器类型uid、email等不能赋值给变量类型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;
}

Answer 1

我发现了一些问题，您导入 switchMap 的方式应该在 pipe 中使用。还有错别字（？）：$(user.uid) 应该是 ${user.uid}。此外，您将 user 传递给 updateUser 函数，但您在有效负载中使用 type User。此外，您需要在有效负载中包含 displayName，因为您已将其设为必需。太棒了....

在两个地方（updateUser() 和 authState）将圆括号改为大括号：

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

然后在里面设置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
  }
}

Angular 中的 SwitchMap 未按预期工作

SwitchMap is not working as intended in Angular

webstorm

firebase

angular