发布 'unwrapping' 个可观察对象

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

页-component.ts 在另一个组件上，我有如下构造函数： constructor(public authService: AuthService) {}

在 html 上： 页-component.html

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

不应该 'unwrap' Observable 在 HTML 上吗？我没有收到任何错误，但没有任何显示。如果我在 页面-component.ts 和 console.log 上订阅用户，我会得到整个对象。

有什么建议吗？

Answer 1

尝试

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

因为 authService.user 是可观察的，而您正在尝试异步 authService.user.firstName

发布 'unwrapping' 个可观察对象

Issues 'unwrapping' an observable

firebase

angularfire

firebase-authentication

angular