Angular RXJS问题：takeWhile条件满足后Observable仍被持续调用

问题根因 #

• Angular变更检测触发无限循环
  Angular的变更检测机制会在每一次异步事件、DOM更新后重新执行模板内的所有表达式。你在*ngIf中直接调用getMyObj$() | async，每次变更检测都会重新执行方法返回一个全新的Observable实例，async管道会重新订阅这个新实例，触发一次getSessionData调用。数据过期后这个流程会无限重复，所以控制台持续打印CONSOLE NULL。
• takeWhile操作符逻辑错误
  takeWhile(myObj => myObj != null)的作用是：当发射的值不满足条件时直接终止流，不会将不符合条件的null值向下游发射。数据过期返回null时，takeWhile直接掐断流，async管道拿到无值状态，*ngIf判定为false触发DOM更新，又引发新一轮变更检测，再次调用getMyObj$()形成死循环。
• alert无法弹出的原因
  死循环持续占满JS主线程，getSessionData中await this.alertService('OBJ EXPIRED')属于微任务，会被无限排队永远得不到执行机会，所以alert提示永远不会弹出。
• 潜在空指针异常
  如果sessionStorage中不存在对应key，sessionStorage.getItem(key)返回null，JSON.parse(null)结果也是null，此时访问item.expiry会直接抛出Cannot read properties of null错误，你的代码没有做对应空值防护。

修复方案 #

1. 不要在模板中直接调用方法返回Observable，提前在组件类中将Observable声明为类属性，避免每次变更检测都生成新实例：

// 组件类中提前声明
myObj$ = this.getMyObj$();

模板直接引用属性：

<div *ngIf="myObj$ | async as obj">
  <div>{{ obj }}</div>
</div>

2. 删掉没必要的takeWhile，允许null值向下游发射：

getMyObj$ (): Observable<MyObj| null> {
    return from(this.getSessionData<MyObj>(this._myObj))
      .pipe(
        tap(x => x ? console.log('getting my Obj') : void 0)
    );
}

3. 给getSessionData增加空值防护，过期后直接删除存储的旧数据避免重复判断：

private async getSessionData<T>(key: string): Promise<T | null> {
    const itemStr = sessionStorage.getItem(key);
    if (!itemStr) return null;
    try {
      const item = JSON.parse(itemStr);
      if (Date.now() > item.expiry) {
        sessionStorage.removeItem(key);
        console.log('CONSOLE NULL');
        await this.alertService('OBJ EXPIRED');
        return null;
      }
      return item.value;
    } catch (e) {
      // 处理JSON解析错误
      sessionStorage.removeItem(key);
      return null;
    }
}

4. 如果需要持续监听数据过期状态，新增定时器轮询逻辑：

getMyObj$ (): Observable<MyObj| null> {
    // 每1秒检查一次过期状态
    return interval(1000).pipe(
      switchMap(() => from(this.getSessionData<MyObj>(this._myObj))),
      tap(x => x ? console.log('getting my Obj') : void 0),
      distinctUntilChanged() // 值不变时不重复发射，减少性能消耗
    );
}

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