Angular 2 ngClass在對照條件檢查時未評估我的表達

我在Angular 2中有一個名爲selectedState的表達式。表達式評估爲const內的五個屬性之一。根據點擊它改變類名稱。Angular 2 ngClass在對照條件檢查時未評估我的表達

    <button 
         class="button button--secondary" 
         [ngClass]="selectedState"> 
         <div class="u-maxX u-centerX"> 
          <span>Button</span> 
          </div> 
         </div> 
        </button>

「selectedState」將返回被點擊的項目;默認，正在懸停，處於活動狀態，禁用和加載。

例如如果我點擊是懸停它將返回

    `<button 
         class="button button--secondary is-hovering"> 
         <div class="u-maxX u-centerX"> 
          <span>Button</span> 
          </div> 
         </div> 
        </button>`

現在，當我改變像這樣的語法。

    <button 
         class="button button--primary" 
         [ngClass]="{selectedState: type === 'primary'}"> 
         <div class="u-maxX u-centerX"> 
          <span>Button</span> 

         </div> 
        </button>

現在「selectedState」的計算結果爲字符串「selectedState」，而不是被動態的，不斷變化的像以前一樣。如何在檢查類型==='primary'時保持動態行爲？我需要檢查類型，因爲頁面上有幾種類型。我需要每種類型隻影響一個按鈕，否則會影響頁面上的所有按鈕。

來源

2017-08-14 London804

*「」selectedState「每次評估爲」selectedState「* - 這就是對象文字的工作方式！您是否考慮過在類中的getter方法中構建適當的對象，而不是試圖在模板中完成所有工作？ – jonrsharpe

在第一個示例中，selectedState評估爲1/5選項。例如。默認，懸停，活動，禁用和加載。在第二個評估中，它只是「selectedState」。 – London804

您可能需要在此處添加有關預期行爲的更多信息。當你輸入==='primary''時，你想讓它成爲'class =「按鈕按鈕 - primary selectedState」'？ –

你應該保持儘可能多的邏輯你的模板儘可能的，所以無論是結合[ngClass]="someVariable"，並通過調用函數變異變量或綁定[ngClass]="someFunction()"並具有功能返回基於某些設定的條件適當的類名。

例如，有一個按鈕，調用setIsHovering功能，和另一個按鈕調用setIsActive功能等，則定義這些功能：

setIsActive() { 
    this.selectedState = "isActive"; 
} 

setIsHovering() { 
    this.selectedState = "isHovering"; 
}

並定義ngClass爲：

[ngClass]="selectedState"

或者，定義一個selectedState功能：

selectedState() { 
    if(this.isHoveringStateVariable == true) { 
     this.selectedState = "isHovering"; 
    } else if (this.isActiveStateVariable == true) { 
      this.selectedState = "isActive"; 
    } 
}

與DEFI NE的ngClass爲：

[ngClass]="selectedState()"

顯然取代this.isHoveringStateVariable與任何邏輯適用於確定實際當前的狀態是什麼。

來源

2017-08-15 03:17:46

沒有評論的Downvotes並不是特別有用。任何人都在意解釋這個答案的問題是什麼？ –

我不是那個投棄權票的人，但你不應該從你的模板中調用函數，因爲他們將在每個變更檢測週期執行。 –

這是一個性能決定，也是我列出的兩個選項之一，第一個選項是綁定到一個變量，並通過按鈕或其他某種狀態更改進行變更。我在我的應用程序中都使用這兩種應用程序，並且我有一些大型應用程序有時候你想要在每個變化檢測週期重新評估類，而不必擔心手動變更類變量，例如在容器中嵌套的導航組件上，並且比通過服務觸發事件或管道更改以同步導航更快。 –

Angular 2 ngClass在對照條件檢查時未評估我的表達

回答

相關問題