RXJS ANGULAR - 在解析 takeWhile 运算符后仍会调用 Observable

Question

我将数据存储在会话存储中，并且有到期日：

private saveSessionData<T>(key: string, value: T) {
    const item = {
      value: value,
      expiry: Date.now() + 10 * 60000 // 10 minutes from now
    }
    sessionStorage.setItem(key, JSON.stringify(item));
  }

我有一个访问这些数据的其他函数，如果我尝试访问的数据已过期，它将 return 为 null :

private async getSessionData<T>(key: string): Promise<T | null> {
    const itemStr = sessionStorage.getItem(key);
    const item = JSON.parse(itemStr);
    if (Date.now() > item.expiry) {
      console.log('CONSOLE NULL');
      await this.alertService('OBJ EXPIRED');
      return null;
    }
    return item.value;
  }

我是这样访问这些数据的：

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

在我看来，我正在使用 |使用双向数据绑定异步显示 myObj :

<div *ngIf="!!(getMyObj$ | async) as obj">
  <div>{{ obj }}</div>
</div>

我的想法是我的控制台一次又一次地向我显示 getting my Obj 直到过期，然后看到警告消息：OBJ EXPIRED 和控制台消息 CONSOLE NULL一次。但是目前，在 getting my Obj 消息之后，我有无限的 CONSOLE NULL 消息（这使我的浏览器崩溃）并且永远不会显示警报事件。

有人知道吗？我不知道是什么导致了那样的崩溃。

Answer 1

这可能是因为 angular 变化检测，导致它每次都重复调用该方法并订阅一个新的可观察对象。您应该创建一次可观察对象并共享它：

this.getMyObj$ = 
  interval(1000).pipe(
    concatMap(() => this.getSessionData<MyObj>(this._myObj)),
    takeWhile(myObj => myObj != null),
    tap(x => console.log('getting my Obj'),
    shareReplay(1)
  );

RXJS ANGULAR - 在解析 takeWhile 运算符后仍会调用 Observable

RXJS ANGULAR - Observable still called after takeWhile operator is resolved

javascript

rxjs

typescript

angular