在 Angular 8 中显示来自 Firebase 的显示名称

Question

我在显示 component.ts 文件中的 "displayName" 属性时遇到问题（用于 console.log 中的测试目的），但它在模板中运行良好。

component.ts:

 constructor(
    private fb: FormBuilder,
    private auth: AuthService
  ) { }
  ngOnInit() {
    this.buildForm();
    console.log(this.auth.user.displayName); // this line is the problem
  }

但是，这在模板中工作正常：

component.html

{{ user.displayName }}

如果您需要服务的更多详细信息...

auth.service.ts

export class AuthService {

  user: Observable<User>;

  constructor(
    private afAuth: AngularFireAuth,
    private afs: AngularFirestore,
  ) {
    //// Get auth data, then get firestore user document || null
    this.user = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return of(null);
        }
      })
    );
  }

Answer 1

我必须订阅 observable。

this.auth.user.subscribe(user => {
  this.userForm.get('email').setValue(user.email);
  this.userForm.get('displayName').setValue(user.displayName);
});

在 Angular 8 中显示来自 Firebase 的显示名称

Show displayName in Angular 8 from Firebase

typescript

firebase

observable

angular8