Angular中Observable布尔值在视图中不生效问题排查

问题本质 #

你用的Subject有个关键特性：它只会向订阅发生之后的订阅者推送新值。

你的场景里：

1. 组件ngOnInit中1秒后调用ready.next(true)，但模板的async管道要等视图初始化完成后才会订阅ready$，这个时机晚于ngOnInit的执行。
2. 当async管道最终订阅时，Subject之前发出的true已经被丢弃，管道接收不到任何值，*ngIf条件不满足，所以段落无法显示。
3. 而你在ngOnInit里手动订阅是在next之前执行的，所以能正常接收到值并打印。

解决方案 #

有两种可靠的修改方式：

1. 使用BehaviorSubject

它会始终保存最新的一个值，新订阅者一订阅就能立即拿到这个最新值：

private ready = new BehaviorSubject<boolean>(false); // 初始值设为false
ready$ = this.ready.asObservable();

ngOnInit() {
  setTimeout(() => {
    this.ready.next(true);
  }, 1000);
}

2. 使用ReplaySubject

它可以缓存指定数量的历史值，新订阅者能获取到缓存的历史值（这里缓存1个即可）：

private ready = new ReplaySubject<boolean>(1);
ready$ = this.ready.asObservable();

ngOnInit() {
  setTimeout(() => {
    this.ready.next(true);
  }, 1000);
}

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