角度2 ngClassは条件をチェックするときに私の式を評価していません

Question

私は、選択された角度2の角度を持っています。この式は、const内の5つのプロパティの1つを評価します。クリックされたものに応じて、クラス名が変更されます。

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

「selectedState」は、クリックされたアイテムを返します。 is-hovering、is-active、disabled、およびloadingです。

私がis-hoverをクリックすると、返されます。

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

私はそういう構文を変更します。

"selectedState"は、以前のように動的でなく変更される代わりに、 "selectedState"という文字列を評価します。タイプ===「プライマリ」をチェックしているときに、どのように動的な動作を維持できますか？ページにはいくつかの種類があるので、タイプを確認する必要があります。 1つのボタンにのみ影響するように各タイプが必要です。それ以外の場合は、ページのすべてのボタンに影響します。

Answer 1

[ngClass]="someVariable"をバインドし、関数を呼び出すことによってその変数を変更するか、または[ngClass]="someFunction()"をバインドして、その関数がいくつかの条件セットに基づいて適切なクラス名を返すように、テンプレートからできるだけ多くのロジックを保持する必要があります。例えば

、それらの機能を定義し、setIsHovering関数を呼び出しボタン、等setIsActive関数を呼び出す別のボタンを持っている：

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

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

としてngClassを定義：

[ngClass]="selectedState" 

あるいは、選択状態関数を定義：

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

とDEFI ngClass NE：

[ngClass]="selectedState()" 

明らかに実際の現在の状態が何であるかを決定するための適切などんなロジックでthis.isHoveringStateVariableを交換してください。