如何使用 AngularFirebase 和 Angular 7 从用户集合中获取用户数据

Posted 2023-03-13

【中文标题】如何使用 AngularFirebase 和 Angular 7 从用户集合中获取用户数据

【英文标题】：How to get user data from user collection using AngularFirebase and Angular 7

【发布时间】：2019-08-01 12:28:09

【问题描述】：

我已经在谷歌上搜索了好几天，并尝试了许多不同的方法，但我无法从我的服务的用户集合中获取用户数据到我的 component.ts 文件以预填充我的表单构建器表单。这是下面的服务代码和我的组件打字稿文件。我可以使用 *ngIf="auth.user | async as user 在组件的模板中获取用户数据，但我无法在组件打字稿文件中获取它。

// auth.service.ts

import  Injectable  from '@angular/core';
import  Router  from '@angular/router';
import  AngularFireAuth  from '@angular/fire/auth';
import  AngularFirestore, AngularFirestoreDocument  from '@angular/fire/firestore';
import  Observable, of  from 'rxjs';
import  first, switchMap  from 'rxjs/operators';

export interface User 
    uid: string;
    displayName: string;
    email: string;
    photoURL: string;


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

    user: Observable<User>;
    requesting = false;
    response: any;

    constructor(public afAuth: AngularFireAuth,
                private afs: AngularFirestore,
                private router: Router) 

        this.user = this.afAuth.authState.pipe(
            switchMap(user => 
                if (user) 
                    sessionStorage.setItem('user', JSON.stringify(user));
                    return this.afs.doc<User>(`users/$user.uid`).valueChanges();
                 else 
                    return of(null);
                
        ));
    

    async userLogin(email: string, password: string) 
        this.requesting = true;
        this.afAuth
            .auth
            .signInWithEmailAndPassword(email, password)
            .then(user => 
                sessionStorage.setItem('user', JSON.stringify(user.user));
                this.router.navigate(['/dashboard']);
                this.requesting = false;
            )
            .catch(err => 
                this.requesting = false;
                this.response = err.message;
                console.log('Something went wrong:', err.message);
            );
    

    async logout() 
        this.afAuth.auth.signOut().then(() => 
            sessionStorage.removeItem('user');
            this.router.navigate(['/']);
        );
    

    get isLoggedIn(): boolean 
        const user = JSON.parse(sessionStorage.getItem('user'));
        return user !== null;
    

// profile-page.component.ts

import  Component, OnInit  from '@angular/core';
import  FormBuilder, FormGroup, Validators  from '@angular/forms';
import  AuthService  from '@services/auth.service';
import  AngularFireAuth  from '@angular/fire/auth';


@Component(
    selector: 'app-profile-page',
    templateUrl: './profile-page.component.html',
    styleUrls: ['./profile-page.component.scss'],
    providers: [AuthService]
)
export class ProfilePageComponent implements OnInit 
    profileData: FormGroup;
    formSubmitted = false;
    user: any;

    constructor(public auth: AuthService, private fb: FormBuilder, public afAuth: AngularFireAuth) 

    

    ngOnInit() 

        this.profileData = this.fb.group(
            unitNumber: ['', [Validators.required]],
            displayName: ['', [Validators.required]],
            lastName: ['', [Validators.required]],
            tagNumber: ['', [Validators.required]],
            email: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9.-]1,@[a-zA-Z0-9.-]2,[.]1[a-zA-Z]2,')]],
            contactNumber: ['', [Validators.required]],
        );
    

    onSubmit(): void 
        this.formSubmitted = true;
        if (this.profileData.dirty && this.profileData.valid) 
            console.log(this.profileData.value);
        
    

那么我如何从当前用户集合中获取用户 unitNumber 并预填充 formBuilder unitNumber 字段和其他字段。

谢谢！

【参考方案1】：

所以解决方法是：

import  AngularFirestore  from '@angular/fire/firestore';

export class Whatever 
   currentUser: any;

   constructor(private db: AngularFirestore) 

   this.db.collection('users').doc('some_uid').valueChanges().subscribe((response) => 
       this.currentUser = response;
   );

然后就可以获取当前的用户值，并弹出到表单中。