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

Question

我想在事件发生时更改我的按钮颜色。我尝试了 2 种方法，但都失败了。使用第一个选项，我什至无法再启动该应用程序，使用第二个选项，颜色就不会改变。

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's同样的堆栈 Blitz 。

.ts

export class AppComponent  {
  toggle: boolean;

  toggleColor() {
    this.toggle = !this.toggle;
  }
}

.html

<button (click)="toggleColor()"
        [ngStyle]="{
          'background-color' : toggle ? 'yellow' : 'pink'
        }"
>Click me</button>