Angular не будет отображать наблюдаемые пользовательские данные любого типа в задаче asyn c

Question

My home.component. html не будет показывать мои userData:

<h1 class="display-4">Hello, {{ (userData | async)?.username }}</h1>

это вызов из home.component.ts:

  ngOnInit(): void {
    this.userData = this.userService.getUser();
  }

и это Сервис :

export class UserService {

  private userDoc: AngularFirestoreDocument<any>;
  user: Observable<Userdata>;

  constructor(private authService: AuthService, private afs: AngularFirestore ) { 

    this.userDoc = this.afs.doc<any>('users/'+ this.authService.getUserId());
    this.user = this.userDoc.valueChanges();

  }

  getUser(){
   return this.user
  }

Вот служба аутентификации:

  constructor(public  afAuth:  AngularFireAuth, 
              public  router:  Router,
              private firestore: AngularFirestore) {  
                console.log("Constructor for Auth Service")               
                this.afAuth.authState.subscribe(userData => {
                  if (userData) {
                    this.router.navigate([''])
                    this.user = userData;
                      if(this.user.emailVerified == false){
                        this.user.sendEmailVerification()
                      }
                    }
                })
              }

  getUserId(){
    if(this.user){
      return this.user.uid;
    } else {
      return null;
    }

  }

, но в html:

это то, что я получаю, когда Я регистрирую пользовательские данные в домашнем компоненте:

Надеюсь, кто-нибудь может помочь

Answer 1

вы можете попробовать распечатать данные в консоли

this.user = this.afs
  .collection<any>('users/'+ this.authService.getUserId())
  .valueChanges()
  .pipe(
    tap(ref => console.log(ref)
  );