Angular 4條件ngClass導航欄不工作

我試圖讓我的導航欄透明，但只在主頁上。但是這個代碼令人困惑，只能在假的條件下工作。「isHome」布爾值通過router.events.subscribe更新並正常工作。這是我對角4Angular 4條件ngClass導航欄不工作

<nav [ngClass]="{'navbar navbar-toggleable-md bg-primary fixed-top navbar-transparent': this.isHome, 'navbar navbar-toggleable-md bg-primary fixed-top': !this.isHome} ">

來源

2017-06-24 Krombopulos Michael

您是否嘗試從{{isHome}}'模板中查看'isHome'的值，以查看它是否相應地將值更改爲您所在的頁面？ – crash

第一次嘗試讓我們讀ngClass' docs（especifically object部分）：

對象 - 鍵時表達的價值評估板因爲被添加CSS類達到真值，否則將被刪除。

所以，把你的情況下，例如：

<nav [ngClass]="{ 
    'navbar navbar-toggleable-md bg-primary fixed-top navbar-transparent': this.isHome, 
    'navbar navbar-toggleable-md bg-primary fixed-top': !this.isHome 
}">

這意味着：

當「家」的計算結果爲真，類導航欄，導航欄，可切換-MD， bg-primary，固定頂端和 navbar-transparent將被添加。
一旦「家」的計算結果爲false，類導航欄，導航欄，可切換-MD，BG-小學，固定頂部將被刪除，因爲有添加這些類，如果home計算結果爲true的條件。

對於深入的解釋，我建議您檢查issue#5763(comment)。

這就是說，解決你的問題是很容易的。您可以執行此：

<nav class="navbar navbar-toggleable-md bg-primary fixed-top" 
    [class.navbar-transparent]="this.isHome">

或者：

<nav class="navbar navbar-toggleable-md bg-primary fixed-top" 
    [ngClass]="{ 'navbar-transparent': this.isHome }">

此外，值得一提的是即使它可能使用模板不建議this.<property>。它可能在未來的版本中被破解，因爲它甚至沒有記錄。

來源

2017-06-24 13:02:22 developer033

謝謝！因爲我剛開始學習Angular，你能向我解釋爲什麼我的方法不起作用嗎？ –

@KrombopulosMichael不用客氣。我編輯了我的答案。 – developer033

非常感謝，你的解釋非常好。到目前爲止，我完全誤解了這個概念。 –

Angular 4條件ngClass導航欄不工作

回答

相關問題