异步管道可观察的覆盖刷新DOM

Question

我使用异步管道订阅DOM中的Observable，如下所示：

<div *ngIf="item$ | async as item; else loading">
    ....
    <div>{{item.name}}</div>
</div>

一切正常。

但是，我有一个刷新方法可供用户调用，它将使网络再次发出请求，并再次返回item $。

因此，在我的ts控制器中：

this.item$ = this._itemService.getItem(url);

该项目已在服务中映射。

但是，我再次设置item $。因此，在加载时，DOM中的项目会消失，因为它不再存在，然后在检索到新的$ item后会再次出现。

如何在不使项目在DOM中消失的情况下“刷新” $ item？

Answer 1

mar*_*tin 5

如您所说，您要覆盖item$，然后需要一段时间才能发出。因此，您可以改用Subject，然后将其称为this._itemService.getItem(url)：

conts subject = new Subject<string>();

...

this.item$ = this.subject
  .switchMap(url => this._itemService.getItem(url));

然后像使用一样使用它item$ | async。当您想更新Observable时，只需向Subject组件中的发出一个新URL ：

this.subject.next(newUrl);

该async管道将保持显示，直到原值getItem发出新的价值，但这样一来就不会闪烁。