Angular 2 Observable的測試值給予CSS類

Question

我可以在html中使用{status_async | async}來顯示由Observable產生的值。

但是，我該如何測試這個Observable是否等於某個東西？

具體來說，我想用它來指定一個類：

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

我發現我可以使用：

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

但隨後的問題就變成了，我是用異步兩次（這裏和顯示值）。

當我檢查成功創建的狀態時，具有諷刺意味的是，在第二次異步之後，值更改爲'以前創建'，即使我僅點擊一次創建按鈕。

我該如何解決這個問題？

Answer 1

在同一個observable上使用多個異步管道時需要小心，因爲這意味着現在有多個訂閱者（訂閱方法多次調用，每次使用異步管道一次）。

對於通過HTTP調用創建的observable，如果訂閱兩次，相應的請求將被調用兩次）...默認情況下，這些可觀察對象是冷的（它們不能共享）。

你需要讓你觀察到的熱使用共享方法：

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