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

Question

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

//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字段和其他字段。

谢谢!

Answer 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;
   });
}

然后您可以获取当前用户值并将其弹出到表单中。