如果为空，Observable 不会更新

Question

我通过 rxjs“过滤器”发现了这种奇怪的行为。 环境： SAP ComposableStorefront / 斯巴达克斯“~2211.21.0” 角度 17.2.0

我在产品详细信息页面上，并在我的 Observable 上应用过滤器，如下所示：

  name$: Observable<Product> = this.currentProductService.getProduct().pipe(
    filter((p: Product) => p.hasFlag)
  );

并像这样渲染它：

<div *ngIf="name$ | async as name">
  <h2>{{name}}</h2>
</div>

这工作正常，但一旦我使用直接路由器链接导航到不同的详细信息页面，如果过滤器返回空值，则值保持不变。

如果过滤器没有返回任何值，因为 p.hasFlag==false 我希望根本不会渲染“名称”，而是保留旧值并保留在新视图中。 如果我重新加载页面，则该产品没有预期的值，但如果我停留在应用程序上下文中并在该组件中接收过一次值，则如果新触发的过滤器返回空，则该值不会更新。

这种行为有意义吗？

我尝试使用 ChangeDetection，但这没有帮助。

Answer 1

尝试将

filter

更改为 rxjs

map

，因为返回值为 false，所以 if 条件会将其隐藏！

name$: Observable<Product> = this.currentProductService.getProduct().pipe(
    map((p: Product) => p?.hasFlag) // <- changed here!
);