Проблемы «распаковки» наблюдаемой

Question

В моей службе аутентификации у меня есть следующее:

authService.ts

user$: Observable<user>;

constructor(private db: AngularFirestore, private afAuth: AngularFireAuth) {
   this.user = this.afAuth.authState.pipe(
            switchMap((userData) => {
                if (userData) {
                    // this.userID = userData.uid;
                    return this.db.doc<User>(this.PATH + userData.uid).valueChanges();
                } else {
                    return of (null);
                }
            })
        )
}

page-component.ts И по другомукомпонент У меня есть мой конструктор, как следующий: constructor(public authService: AuthService) {}

И на HTML: page-component.html

<div>{{ authService.user.firstName | async }}</div>

Разве это не "развернуть"Наблюдаемый на HTML? Я не получаю ошибок, но ничего не появляется. Если я подпишусь на пользователя на page-component.ts и console.log, я получу весь объект.

Есть какие-нибудь советы?

Answer 1

Попробуйте

<div *ngIf="(authService.user | async) as user"> {{user.firstName}}</div>

Поскольку authService.user является наблюдаемым, и вы пытаетесь асинхронизировать authService.user.firstName