如何更改事件上的按钮颜色？

Question

我想在事件中更改我的按钮颜色。我尝试了两种方法，但都失败了。使用第一个选项我什至无法再启动应用程序，使用第二个选项颜色不会改变。1. HTML<ion-button [color]="done ? 'primary' : 'danger'"> </ion-button>TSpublic done: boolean = true;func() { this.done = !this.done;}2. HTML     <ion-button (click)="toggleNamedColor()"></ion-button>TSpublic ionicNamedColor: string = 'light';public ionicNamedColor2: string = 'primary';public toggleNamedColor(): void {  if(this.ionicNamedColor === 'light') {     this.ionicNamedColor = 'primary'  } else {    this.ionicNamedColor = 'light'  }

Answer 1

您可以使用该ngStyle指令执行此操作。这是相同的堆栈闪电战。

.ts

export class AppComponent  {

  toggle: boolean;

  toggleColor() {

    this.toggle = !this.toggle;

  }

}

.html

<button (click)="toggleColor()"

        [ngStyle]="{

          'background-color' : toggle ? 'yellow' : 'pink'

        }"

>Click me</button>

Answer 2

看看Stackblitz

.ts 文件

export class AppComponent  {

  name = 'Angular';

  toggle: boolean ;

  propColor:string ='red' ;

  changeColor() {

    this.toggle = !this.toggle;

    if(this.toggle ==true){

      this.propColor = 'blue'

    }else{

      this.propColor = 'red'

    }

    //console.log(this.toggle);

  }

}

html模板

<button (click)="changeColor()"

        [ngStyle]="{

          'background-color' :  propColor 

        }"

>Toggle Color</button>

Answer 3

编辑：不要这样做

我会这样做：

<ion-button [color]="getColor()"></ion-button>

然后在后面写一段代码，返回你想要的颜色：

getColor(): string {

  return this.done ? 'primary' : 'danger';

}