相同的角度2不同類的svg組件

Question

我有一個SVG燈泡按鈕組件，我用一個布爾值綁定。 isOn

<app-status-bulb [isOn]=false></app-status-bulb> 
<app-status-bulb [isOn]=true></app-status-bulb> 

然後我condinionally添加類的基礎上，在我的應用程序狀態燈泡組件isOn。

<stop offset="1" [ngClass]="isOn ? 'on' : 'off'"/> 

而且我的CSS是這樣的：

stop.on { 
    stop-color: #00ff00; 
} 


stop.off { 
    stop-color: #ff1700; 
} 

不幸的是這兩個燈泡是綠色的。因爲最後一個組件設置爲true。但是當我調試{{isOn}}時，第一個設置爲false，第二個設置爲true。

如何獲得我的app-status-bulb組件的兩個單獨狀態？

Answer 1

使用您的屬性綁定雙引號：

<app-status-bulb [isOn]="false"></app-status-bulb> 
<app-status-bulb [isOn]="true"></app-status-bulb>