Angular中async管道返回异步结果前如何显示默认值'-'

问题原因 #

原有写法不生效的核心原因是：[innerText]属性绑定的渲染优先级高于标签内部的插值表达式。Angular初始化组件时，会直接将span的内部文本覆盖为你绑定的'-'，标签内写的{{ futureCredit$ | async | currency:'EUR'}}从一开始就不会被渲染，后续异步结果返回自然也无法替换占位内容。

实现方案 #

以下几种写法都可以正确实现「异步结果返回前显示-占位，返回后展示格式化后金额」的需求：

方案1：空值合并写法（代码最简洁，适合Angular 12及以上版本） #

利用async管道在异步数据未抵达时返回null的特性，配合空值合并运算符直接处理，不需要额外模板：

<span>
  {{ (futureCredit$ | async | currency:'EUR') ?? '-' }}
</span>

注意：如果你的异步流本身可能返回null作为合法业务值，不适合用这个写法，优先选下面的方案。

方案2：else占位模板写法（兼容性最好，逻辑最清晰） #

用ng-container配合async管道捕获异步值，未返回值时自动渲染占位模板，还能避免重复订阅异步流：

<ng-container *ngIf="futureCredit$ | async as credit; else placeholder">
  <span>{{ credit | currency:'EUR' }}</span>
</ng-container>

<ng-template #placeholder>
  <span>-</span>
</ng-template>

如果你的业务场景中futureCredit$可能返回0、null这类falsy的合法值，只需要把*ngIf的判断条件调整为包装对象写法，避免合法值被误判为未加载：

<ng-container *ngIf="{ credit: futureCredit$ | async } as asyncData; else placeholder">
  <span>{{ asyncData.credit !== undefined ? (asyncData.credit | currency:'EUR') : '-' }}</span>
</ng-container>

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