根據angular2打字稿中的屬性值分配類

Question

我想基於angular2中的屬性在html上分配一個類。 那是嘗試不使用jquery和bootstrap頂部打開一個dropdownlist

所以我有

<li
  class="dropdown mega-menu mega-menu-wide"

  //stuck at adding class of open if propertyval is admin
  >  
 <a #admin class="dropdown-toggle" (click)="toggle(admin)" >Administrative</a>
</li>

在我的ts中

export class ... {
  propertyval :null


   toggle(val){
    this.propertyval = null;
   }
  }

所以現在我想將open類分配給列表，如果propertyval的值為admin，則它應該為null

我該怎么辦

Answer 1

您可以使用屬性綁定來動態添加類。

<li
  class="dropdown mega-menu mega-menu-wide"
  [class.WhateverYouWant]="propertyval === 'admin'"
  //stuck at adding class of open if propertyval is admin
  >  
 <a #admin class="dropdown-toggle" (click)="toggle(admin)" >Administrative</a>
</li>

Answer 2

您可以使用NgClass指令：

<li [ngClass]="{'class-open': open}">  
  <a #admin class="dropdown-toggle" (click)="open = !open;" >Administrative</a>
</li>

class-open是影響下拉列表的類。 open是您最初在組件中將其設置為false或true的變量，因此不需要toggle()方法。

Answer 3

嗨，您可以使用[ngClass]添加動態樣式。

<a #admin class="dropdown-toggle" (click)="toggle(admin)"  [ngClass]="{'dynStyle': isAdmin }" >Administrative</a>

//樣式

.dynStyle{
  color:green;
}

//.ts

       toggle(val){
        if(val!='admin') 
        {
            this.propertyval = null;
          return isAdmin=false
           }
         else

    {
    return isAdmin=true;
    }
}

Answer 4

在您的類上創建一個吸氣劑，返回布爾值表示屬性的狀態。

get propertyHasValue(): boolean {
  return !isNullOrUndefined(this.propertyval);
}

然后將ng-class指令添加到您的元素

<a [ng-class]="{ 'open': propertyHasValue }"/>