我尝试使用Firebase在Angular 5中构建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;
}
答案 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
}
}