Angular 14 抱怨我的可观察对象的属性不存在

Question

所以我宣布：

 public userEmail?: Observable<LoggedInUser | null>;

然后在我的 ngOnInit() 中我有：

this.Authstate.dispatch(unencryptEmail({ email: this.userKey }));

然后在我的 ngAfterContentInit() 中我有：

this.userEmail = this.Authstate.select(selectUserInfo);

前提是用户忘记了密码，会发送一封电子邮件，其中包含加密电子邮件的链接。因此，当他们点击链接时，我首先从查询参数中获取加密并在 ngOnInit() 中对其进行解密。然后我尝试从我的状态对象获取电子邮件以将其显示在页面上。

我的页面有：

<div *ngIf="userEmail !== null">
    {{userEmail.LoggedInUser.email | async}}
</div>

错误指出 LoggedInUser 在 Obervable 类型 LoggedInUser 上不存在：

export interface LoggedInUser {
  LoggedInUser: User,
  token?: string
}

我的用户对象有电子邮件属性。

解密所有工作，它显示传回的值是问题所在。

这是我的效果：

unencryptEmail$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(fromAuthActions.unencryptEmail),
        mergeMap((auth) => {
          return this.authService.doUnencryptEmail(auth.email)
            .pipe(map((data) => { return fromAuthActions.unencryptEmailComplete({ profile: data });  }))
        })
      ),
    { dispatch: true }
  );

我的选择器：

export const selectUserInfo = createSelector(
  getAuthFeatureState,
  (state: AuthState) => state.profile
);

Answer 1

由于 userEmail 是一个 Observable，您需要订阅它才能获取值：

例如：

<div *ngIf="(userEmail | async) !== null">
  {{ (userEmail | async)?.LoggedInUser.email }}
</div>