typescript - Firebase の Angular 8 で displayName を表示する

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