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

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指令执行此操作。这是相同的堆栈闪电战。.tsexport class AppComponent&nbsp; {&nbsp; toggle: boolean;&nbsp; toggleColor() {&nbsp; &nbsp; this.toggle = !this.toggle;&nbsp; }}.html<button (click)="toggleColor()"&nbsp; &nbsp; &nbsp; &nbsp; [ngStyle]="{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'background-color' : toggle ? 'yellow' : 'pink'&nbsp; &nbsp; &nbsp; &nbsp; }">Click me</button>

Answer 2

看看Stackblitz.ts 文件export class AppComponent&nbsp; {&nbsp; name = 'Angular';&nbsp; toggle: boolean ;&nbsp; propColor:string ='red' ;&nbsp; changeColor() {&nbsp; &nbsp; this.toggle = !this.toggle;&nbsp; &nbsp; if(this.toggle ==true){&nbsp; &nbsp; &nbsp; this.propColor = 'blue'&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; this.propColor = 'red'&nbsp; &nbsp; }&nbsp; &nbsp; //console.log(this.toggle);&nbsp; }}html模板<button (click)="changeColor()"&nbsp; &nbsp; &nbsp; &nbsp; [ngStyle]="{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'background-color' :&nbsp; propColor&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }">Toggle Color</button>

Answer 3

编辑：不要这样做我会这样做：<ion-button [color]="getColor()"></ion-button>然后在后面写一段代码，返回你想要的颜色：getColor(): string {&nbsp; return this.done ? 'primary' : 'danger';}