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

authState$是类型为的可观察变量

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

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

错误在于模板return

中的以下代码无法读取未定义的属性fullName

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

---

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

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

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

{{authState？.user？.fullName}

或按如下方式保存：

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

{{（this.authState$|async）？.user？.fullName | |'''}

尽管我还建议检查为什么未为经过身份验证的用户填充

user

属性

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