Angular：无需等待值加载即可显示标签的最优方案

不用再重复写*ngIf="user"，直接通过**可选链操作符（?.）安全访问未加载的用户属性，再配合空值合并操作符（??）**设置加载占位符，就能实现标签立即显示、属性值加载后自动更新的效果。

优化前冗余写法 #

<div>
  <span>name:</span> <span *ngIf="user">{{user.name}}</span>
  <span>email:</span> <span *ngIf="user">{{user.email}}</span>
</div>

优化后简洁写法 #

<div>
  <span>name:</span> <span>{{ user?.name ?? '加载中...' }}</span>
  <span>email:</span> <span>{{ user?.email ?? '加载中...' }}</span>
</div>

关键逻辑说明 #

• user?.name：当user还未加载（为null/undefined）时，不会抛出访问属性的错误，而是返回undefined，避免页面报错
• ?? '加载中...'：如果前面的属性值为空，就显示占位文本，你也可以换成空字符串''或者其他样式的占位符，比如灰色的“-”

进阶：统一加载模板（适合复杂占位效果） #

如果需要给所有未加载的属性用同一个复杂占位（比如加载动画），可以定义一次ng-template，重复引用：

<div>
  <span>name:</span> <span *ngIf="user; else loading">{{user.name}}</span>
  <span>email:</span> <span *ngIf="user; else loading">{{user.email}}</span>
</div>

<ng-template #loading>
  <span style="color: #999;">加载中...</span>
</ng-template>

这种写法同样不用重复写*ngIf判断，而且标签会一直显示，完全符合你的需求。

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