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

Question

我想在事件中更改按钮颜色。我尝试了两种方法，但都失败了。第一个选项我什至无法启动应用程序，第二个选项颜色只是没有改变。

1。 HTML

<ion-button [color]="done ? 'primary' : 'danger'"> </ion-button>

TS

public done: boolean = true;

func() { 
this.done = !this.done;
}

2。 HTML

     <ion-button (click)="toggleNamedColor()"></ion-button>

TS

public ionicNamedColor: string = 'light';
public ionicNamedColor2: string = 'primary';

public toggleNamedColor(): void {
  if(this.ionicNamedColor === 'light') { 
    this.ionicNamedColor = 'primary'
  } else {
    this.ionicNamedColor = 'light'
  }

Answer 1

您可以使用ngStyle 指令执行此操作。 Here'sstackblitz 也是一样。

.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';
}