在数据加载时无法读取未定义的属性

Question

authState$ 是一个

类型的 Observable 变量

{
    ...
    isAuthenticated: boolean;
    user: User | null;
}

如果用户通过身份验证，则在 ngrx effect init 上启动用户属性。

错误是模板下面的代码 return cannot read property fullName of undifined

<div *ngIf="(this.authState$ | async).isAuthenticated" >
    {{ (this.authState$ | async).user.fullName || '' }}
</div>

我试过这个解决方案

{{ (this.authState$ | async).user ? (this.authState$ | async).user.fullName : '' }}

但事实证明它没有监听更改，我必须重新加载页面

Answer 1

您可以按如下方式更改它，以这种方式创建的订阅较少并且 div 块将不会显示在 DOM 中，除非用户经过身份验证，safe operator 是安全获取的方式检查讨厌的属性：

<ng-container *ngIf="authState$ | async as authState">
  <div *ngIf="authState?.isAuthenticated" >
    {{ authState?.user?.fullName || '' }}
  </div>
</ng-container>

或保持如下：

<div *ngIf="(this.authState$ | async)?.isAuthenticated" >
    {{ (this.authState$ | async)?.user?.fullName || '' }}
</div>

虽然我也建议检查为什么 user 属性没有为经过身份验证的用户填充

在数据加载时无法读取未定义的属性

cannot read property of undefined on data loading

undefined

observable

angular

async-pipe

在数据加载时无法读取未定义的 属性

cannot read property of undefined on data loading

undefined

observable

angular

async-pipe

在数据加载时无法读取未定义的属性