如何在离子4中单击按钮时更改按钮颜色答案

【问题标题】：How to change buttons color on click of button in ionic 4如何在离子4中单击按钮时更改按钮颜色
【发布时间】：2020-07-10 17:51:36
【问题描述】：

我想在单击按钮时更改按钮颜色。

我正在创建一个测验应用程序。

如果答案正确，则单击按钮时，颜色应更改为绿色，如果错误，则应更改为红色。

这行得通。我已经这样做了。

但现在的问题是，如果答案错误，则其颜色变为红色，正确答案按钮颜色变为绿色。

如何做到这一点？

play-quiz.html

<ion-list>
    <ion-row class="marginTop">
      <ion-col class="border ion-text-center">
        Grand Central Terminal, Park Avenue, New York is the world's
      </ion-col>
    </ion-row>

    <ion-row class="marginTop">
      <ion-col class="ion-text-center">
        <ion-button id="1" #first class="btn" expand="block" (click)="onClick(first,'1')">
          Largest Railway Station
        </ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="ion-text-center">
        <ion-button id="2" #second class="btn" expand="block" (click)="onClick(second,'2')">
          highest railway station
        </ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="ion-text-center">
        <ion-button id="3" #third class="btn" expand="block" (click)="onClick(third,'3')">
          longest railway station
        </ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="ion-text-center">
        <ion-button id="4" #four class="btn" expand="block" (click)="onClick(four,'4')">
          None of the above
        </ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <ion-button class="btn right" expand="small">
          Next
        </ion-button>
      </ion-col>
    </ion-row>

  </ion-list>

play-quiz.ts。

answer: any = "1";

onClick(ionicButton, btn: any) {
      if(this.answer == btn){
        ionicButton.color =  'success';
      } else {
        ionicButton.color =  'danger';
      }
  }

【问题讨论】：

您也可以使用 [ngClass]。基于全局属性（将在单击事件后更改），您可以将所需的类添加到按钮元素。
你能举例说明一下吗？我是离子新手。我正在学习它。 @AnoopRajasekharaWarrier

标签： angular ionic-framework button ionic4 background-color

【解决方案1】：

在 HTML 中：

<ion-button [ngClass]="isClicked() ? 'btn red': 'btn'" (click)="onClick()">Toggle</ion-button>

在 TS 中：

isClick: boolean=false;

isClicked(){
 return this.isClick;
}

onClick(){
 this.isClick=!this.isClick;
}

您可以在onClick() 方法中修改的功能。根据返回的值isClicked()，它将附加类'red'（如果返回true，则添加，否则不添加）。

CSS 你可以得到所有需要的样式。

希望这会有所帮助。

【讨论】：