Angular：AsyncPipe搭配*ngIf时，如何等待Observable发射值后渲染Header

这个场景我太熟悉了——当Observable还没吐出第一个值的时候，async管道会返回null，而*ngIf会把null判定为false，所以直接跳去else分支渲染普通Header了，完全不是我们想要的“等第一个值出来再决定渲染哪个”的效果。

给你几个靠谱的解决方案：

方案一：用async as缓存值，先判断是否已发射值 #

这是最推荐的做法，既避免重复订阅Observable，又能精准控制渲染时机：

<!-- 先把Observable的值缓存到变量isComplex里，同时判断是否已存在值 -->
<ng-container *ngIf="isComplex$ | async as isComplex; else waitForValue">
  <!-- 有值之后，再根据布尔值渲染对应组件 -->
  <complex-header *ngIf="isComplex"></complex-header>
  <ordinary-header *ngIf="!isComplex"></ordinary-header>
</ng-container>

<!-- 等待期间的模板，可以留空或者放加载提示 -->
<ng-template #waitForValue>
  <!-- <div>加载中...</div> -->
</ng-template>

原理是：当Observable还没发射值时，isComplex$ | async返回null，这时候*ngIf="... as isComplex; else waitForValue"会触发else分支，直到Observable吐出第一个值，isComplex变量被赋值，才会进入主分支判断渲染哪个Header。

方案二：给Observable添加初始占位值（可选） #

如果你能接受给Observable设置一个初始的“未就绪”状态，可以用startWith操作符：

// 在组件类里修改Observable
isComplex$ = originalObservable$.pipe(
  startWith(undefined) // 初始值设为undefined，表示还没就绪
);

然后模板里这样写：

<complex-header *ngIf="isComplex$ | async === true"></complex-header>
<ordinary-header *ngIf="isComplex$ | async === false"></ordinary-header>

这样只有当Observable发射true或false时，对应的Header才会渲染，初始的undefined状态下两个都不显示，直到真实值到来。

为什么原来的代码会出问题？ #

再帮你理一下原代码的逻辑：

<complex-header *ngIf="isComplex$ | async; else ordinaryHeader"></complex-header>

当Observable还没发射值时，isComplex$ | async返回null，*ngIf会把null视为false，所以直接触发else分支渲染普通Header，这就是你遇到的问题根源。

内容的提问来源于stack exchange，提问作者Hikmat G.