使用Angular2更改類屬性

Question

如何使用angular2動態更改.red類中的背景色？

var greenColor = 'green' 
$('.red').css('background', greenColor); 

Answer 1

我發現你

我希望能在一個同樣的問題，這個答案是你的問題的解決方案

Angular2 dynamic change CSS property

感謝

編輯：

在你的角度使用下面的例子：

$scope.headerColor = "#FFFFFF"; 
$scope.divStyle = { 
background-color : $scope.headerColor 
} 

和

<div class= "headerStyle" ng-class= "{'background-color' : headerColor}"> 

希望這項工作！

Answer 2

嘗試喜歡這張

this.MsgStyle = this.sanitizer.bypassSecurityTrustStyle("green"); 

<span [style.background]="MsgStyle">Hello World</span> 

Answer 3

要角2

動態地改變類屬性的組件::

export class App { 

    alertType: string = "alert alert-"; 

    constructor(private dataService: DataService) { } 


    doTransaction(userId: string) { 
     this.isLoading = true; 
     var result; 
     var response; 
     var statuscode; 

     this.dataService.doTransaction(this.userId) 
      .subscribe(
      data => { 
       console.log("data :: " + data); 

      }, 
      error => { 
       console.log(error);     
       this.message = error; 
       this.alertType = this.alertType + "danger" + " alert-dismissible fade show";    

      }, 
      () => { 
       console.log("Response completed");     
       this.message = result.message; 
       this.alertType = this.alertType + "success" + " alert-dismissible fade show";  
       this.alert = true; 


      } 

      ); 
    } 
} 

的HTML ::

<div *ngIf="alert" [className]="alertType" role="alert"> 
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
    <span aria-hidden="true">&times;</span> 
</button> {{message}} 

注::

組件中的警告類型是將在HTML中使用的動態類名。 和類名[className]是指CSS類 所以[className]="alertType" 將被瀏覽器解釋爲

<div class="alert alert-info alert-dismissible fade show" role="alert">