Angular 2 Observable 的测试值给出 CSS class

Question

我可以在 html 中使用 {status_async | async} 显示 Observable 产生的值。

但是，我如何测试这个 Observable 是否等于某物？

具体来说，我想用它来分配一个 class:

<div [ngClass]="{'has-danger': status_async == 'created before'}">
    <input type="text">
</div>

我发现我可以使用：

<div [ngClass]="{'has-danger': (status_async | async) == 'created before'}">

但是问题变成了我使用了两次异步（在这里和显示值）。

当我检查成功创建的状态时，具有讽刺意味的是，在第二次异步之后，值变为 'created before'，即使我只单击了一次创建按钮。

我该如何解决这个问题？

Answer 1

在同一个可观察对象上使用多个异步管道时需要小心，因为这意味着现在有多个订阅者（订阅方法被调用多次，每次使用异步管道一个）。

对于从 HTTP 调用创建的 observable，如果订阅两次，相应的请求将被调用两次）...默认情况下，此类 observable 是冷的（它们无法共享）。

您需要使用 share 方法使您的 observable 变热：

this.status_async = this.status_async.share();

Test value of Angular 2 Observable for giving CSS class