Angular中Observable在模板指令不更新但插值正常问题

核心原因 #

你遇到的问题是因为每次使用async管道都会对Observable发起一次独立订阅。如果你的isLoading$没有配置为多播流（比如普通Subject转的Observable，未添加共享操作符），多个订阅会各自维护独立的状态流，导致状态更新无法同步到所有订阅者。

比如当你同时在*ngIf和插值中使用isLoading$ | async时，两个订阅可能处于不同的状态：其中一个能接收到updateIsLoading的更新，另一个却停留在初始值，就出现了插值正常、*ngIf无反应的情况；注释掉其中一个async后，只剩一个订阅，状态自然同步。

解决办法 #

方法1：将Observable转为多播流（推荐）

在组件代码中，给isLoading$添加shareReplay(1)操作符，让所有async管道共享同一个订阅，确保状态同步：

import { Subject } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

// 组件内定义
private isLoadingSubject = new Subject<boolean>();
isLoading$ = this.isLoadingSubject.asObservable().pipe(shareReplay(1));

updateIsLoading(value: boolean) {
  this.isLoadingSubject.next(value);
}

如果需要新订阅者能立即拿到当前最新状态，也可以直接用BehaviorSubject（本身就是多播且保存最新值的流）：

import { BehaviorSubject } from 'rxjs';

private isLoadingSubject = new BehaviorSubject<boolean>(false); // 初始值
isLoading$ = this.isLoadingSubject.asObservable();

updateIsLoading(value: boolean) {
  this.isLoadingSubject.next(value);
}

方法2：模板内复用async结果

用*ngIf的as语法，将async的结果赋值给变量，后续所有用到状态的地方都复用这个变量，这样只会发起一次订阅：

<!-- 用ng-container包裹，避免额外DOM元素 -->
<ng-container *ngIf="isLoading$ | async as isLoading">
  <div>加载中...</div>
</ng-container>
<ng-container *ngIf="!isLoading">
  <div>内容展示区</div>
</ng-container>

<!-- 插值直接复用变量，无需再次调用async -->
当前加载状态：{{ isLoading }}

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