Angular 14报错：Observable对象属性不存在，邮箱显示失败

问题场景 #

用户忘记密码后点击含加密邮箱的链接，通过查询参数获取密文解密，再从NgRx状态中读取邮箱展示。目前模板中"hello"可正常显示，但邮箱内容不展示，Redux DevTools已确认状态中已填充邮箱数据。

现有代码梳理 #

组件核心逻辑 #

// 变量声明
public userEmail?: Observable<LoggedInUser | null>;

// ngOnInit分发解密动作
this.Authstate.dispatch(unencryptEmail({ email: this.userKey }));

// ngAfterContentInit绑定Selector
this.userEmail = this.Authstate.select(selectUserInfo);

接口定义 #

export interface LoggedInUser {
  LoggedInUser: User,
  token?: string
}
// User对象包含email属性

当前模板代码 #

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

NgRx Effect与Selector #

Effect代码

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

Selector代码

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

问题分析与解决方案 #

核心问题1：重复订阅Observable #

模板中两次使用(userEmail | async)会触发两次独立订阅，尽管NgRx Selector是共享数据源，但可能出现时序差异或数据引用不一致的问题，导致邮箱属性读取异常。

核心问题2：数据结构匹配校验 #

需确认doUnencryptEmail返回的data结构是否完全匹配LoggedInUser接口，避免因后台返回数据嵌套层级不符（比如多一层data包裹），导致LoggedInUser属性无法正确读取。

优化后的模板代码 #

<!-- 使用async as语法将订阅结果赋值给模板变量，避免重复订阅 -->
<div *ngIf="userEmail | async as userProfile">
  hello
  {{userProfile.LoggedInUser?.email}}
</div>

额外排查步骤 #

1. 打印订阅结果验证结构：在组件中添加日志，确认返回数据的结构是否符合预期

this.userEmail.subscribe(profile => {
  console.log('状态返回的profile数据:', profile);
});

查看控制台输出的profile是否包含LoggedInUser属性，且email字段有值。

2. 检查Selector返回类型：确认selectUserInfo返回的确实是LoggedInUser | null，而非额外嵌套的结构。

3. 验证Effect数据处理：确认doUnencryptEmail返回的data直接是LoggedInUser格式，而非需要额外解构的嵌套对象。

内容的提问来源于stack exchange，提问作者bilpor