在模板語句中使用條件運算符

在此代碼中，我試圖更改元素上的transform屬性。當我點擊元素一個第一次一切正常 - 元素翻譯。當我再次點擊它時，沒有任何變化。我錯過了什麼？在模板語句中使用條件運算符

<div id="one" (click)="two.style.transform = (two.style.transform == 'translate(-100vh)') ? 'translate(0vh)' : 'translate(-100vh)'"></div> 
<div id="two" #two></div>

來源

2017-01-02 Eugene Epifanov

爲什麼這工作第一次

因爲第一次承擔two.style.transform == 'translate(-100vh)'爲假，那麼它將運行條件translate(-100vh)

爲什麼這是行不通的第二次

因爲第二次條件two.style.transform == 'translate(-100vh)'又是假，那麼它會再次運行相同的條件下translate(-100vh)所以沒有效果顯示

爲了更好地clerification請運行follwing例如

<div id="one" (click)="two.style.background = (two.style.background == 'grey') ? 'white' : 'red'">BB</div> 
<div id="two" #two>AA</div>

來源

2017-01-02 12:22:25

謝謝你，好先生！我仍然無法工作。是否有另一種在模板內做到這一點的方式？我的意思是，從一種狀態切換到另一種狀態 –

@EugeneEpifanov這可能有點晚，但您可以始終使用'[ngClass]'對類進行有條件的解析。 ''div id =「one」[ngClass] =「{'translateHeight'：isTranslated}」>'然後在你的組件中有一個布爾值來存儲'isTranslated'狀態，然後在你的css中有變量' .translateHeight {transform：translate（-100vh）; }' – ChrisG

在模板語句中使用條件運算符

回答

相關問題