访问URL时Angular浏览器端返回值为null，如何保留ngIf且页面无报错

报错核心原因 #

直接访问隐私页面时，未经过首页初始化用户数据，this.userData.getUserData()返回null，模板直接读取null的username属性触发类型错误。

可行解决方案（均保留原有ngIf判断逻辑，无页面报错） #

• 方案1：模板层使用可选链+空值合并（改动最小，最推荐）
  直接修改.html文件的ngIf判断条件：

<div class="login-header-block" *ngIf="(userDetails?.username ?? 'guest') !== 'guest'">

原理说明：可选链?.会在userDetails为null/undefined时直接返回undefined，空值合并运算符??会将undefined替换为默认值'guest'，此时整个判断结果为false，不会渲染对应区块，完全符合原有逻辑，也不会触发属性读取报错。

• 方案2：TS层添加兜底默认值（无需修改模板，逻辑更统一）
  修改.ts文件中userDetails的赋值语句：

this.userDetails = this.userData.getUserData() || { username: 'guest' };

原理说明：保证userDetails永远是一个带有username属性的对象，就算没有提前获取用户数据，也不会出现null值，模板读取属性永远合法，原有模板逻辑不需要做任何调整。

• 方案3：模板新增非空前置判断（兼容低版本Angular）
  如果使用的Angular版本低于12，不支持可选链语法，可以直接在ngIf中先判断userDetails是否存在：

<div class="login-header-block" *ngIf="userDetails && userDetails.username !== 'guest'">

原理说明：JavaScript的短路逻辑会在userDetails为null时直接返回false，不会执行后续的username属性读取操作，避免触发报错。

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