Angular 8中如何在Observable为空时隐藏div？

首先得明确一个关键点：在Angular模板里，你不能直接把Observable对象塞进*ngIf里做判断——isSignedIn$是一个数据流容器，不是布尔值或者直接可用的状态，必须用async管道来订阅它，把它转换成实际输出的登录状态值。

基础用法：用async管道处理Observable #

你原来写的<div *ngIf="!isSignedIn$">是无效的，因为!isSignedIn$判断的是Observable对象本身（对象是truthy的，取反后永远是false），而不是它发出的登录状态。正确的基础写法分两种情况：

如果是仅当用户登录时显示div（符合你“未登录或无返回值时隐藏”的需求）：

<div *ngIf="isSignedIn$ | async">
  <!-- 登录后才显示的内容 -->
</div>

如果是仅当用户未登录时显示div（比如登录按钮）：

<div *ngIf="!(isSignedIn$ | async)">
  <!-- 未登录时显示的内容 -->
</div>

处理Observable初始无值的情况 #

现在你的核心需求是：页面刚加载、登录状态还没返回（Observable无值），或者用户未登录时，都要隐藏这个div。上面的基础写法能处理“未登录”的情况，但如果isSignedIn$初始没有发出值（比如从后端获取登录状态需要时间），async管道会返回null，这时候!(null)是true，会导致div在加载时意外显示——这显然不符合你的要求。

这里有两种常用的解决方式：

方式1：给Observable添加初始值

用RxJS的startWith操作符，给isSignedIn$设置一个初始默认状态（比如false，代表未登录）。这样页面加载时会先收到这个初始值，不会出现null的空白状态。

在组件类里修改：

import { startWith } from 'rxjs/operators';

// 假设你原来的isSignedIn$是从认证服务获取的
isSignedIn$ = this.authService.isSignedIn$.pipe(
  startWith(false) // 初始状态设为未登录
);

之后模板里就可以放心使用：

<div *ngIf="isSignedIn$ | async">登录后显示的内容</div>

方式2：在模板里明确判断非空

如果不想修改Observable的数据流，也可以在模板里同时判断“状态已获取”且“已登录”：

<ng-container *ngIf="isSignedIn$ | async as isSignedIn">
  <div *ngIf="isSignedIn">
    登录后显示的内容
  </div>
</ng-container>

ng-container是Angular的虚拟容器，不会渲染成实际DOM，用来包裹判断逻辑既清晰又不会额外增加DOM节点，还能避免重复订阅Observable（直接写两次isSignedIn$ | async会订阅两次，性能略差）。

额外小提示 #

• async管道会自动帮你管理Observable的订阅和取消订阅，不用担心内存泄漏问题，这是Angular模板处理Observable的标准姿势。
• 如果你的isSignedIn$登录时返回的是用户对象（而不是布尔值），上面的判断逻辑依然有效——因为在*ngIf里，非空对象会被视为true。

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