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

Question

我已经在谷歌上搜索了好几天，并尝试了许多不同的方法，但我无法从我的服务中的用户集合中获取用户数据到我的 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 字段和其他字段。

谢谢！

标签： angulartypescriptfirebaseangularfire2angular7

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

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