在ionic 4中单击按钮时如何更改按钮颜色 [英] How to change buttons color on click of button in ionic 4

问题描述

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

I want to change buttons color on click of button.

我正在创建测验应用程序.

I am creating a quiz application.

单击按钮后，如果答案正确，则应将颜色更改为绿色，如果错误，则应将其更改为红色.

On click of a button if the answer is correct the color should be changed to green and if wrong it should be changed to red.

这是可行的.我已经做到了.

This is worked. I have done this.

但是现在的问题是，如果答案是错误的，那么它的颜色将变为红色，而正确答案按钮的颜色将变为绿色.

But now the issue is if the answer is wrong then its color changed to red and correct answers button color changed to green.

如何执行此操作?

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

推荐答案

在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，则将添加，否则为否).

The functionality you can modify in onClick() method. Based on the value isClicked() returned it will append the class 'red' (if it returns true, it will add, else no).

CSS可以提供​​所有必需的样式.

CSS you can all the required styles.

希望这会有所帮助.

这篇关于在ionic 4中单击按钮时如何更改按钮颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！