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

动态更改类属性

Component ::

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}}

注意::

组件中的alertType是将在html中使用的动态类名。类名[className]指的是CSS类所以[className]="alertType" 将被浏览器解释为

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

使用Angular2更改类属性

3 个答案: