Как изменить цвет кнопок при нажатии кнопки в ioni c 4 - PullRequest
Новая
       50

Как изменить цвет кнопок при нажатии кнопки в ioni c 4

0 голосов
/ 30 марта 2020

Я хочу изменить цвет кнопок при нажатии кнопки.

Я создаю приложение для викторины.

При нажатии кнопки, если ответ правильный, цвет должен быть изменен на зеленый, а в случае ошибки - на красный.

Это сработало. Я сделал это.

Но теперь проблема в том, что если ответ неправильный, то его цвет меняется на красный, а цвет кнопки правильных ответов меняется на зеленый.

Как это сделать?

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

enter image description here

1 Ответ

0 голосов
/ 30 марта 2020

In HTML: 

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

In TS: 

isClick: boolean=false;

isClicked(){
 return this.isClick;
}

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

Функциональность, которую вы можете изменить в методе onClick(). На основе возвращенного значения isClicked() будет добавлен класс 'red' (если он вернет true, он добавит, иначе нет).

CSS Вы можете использовать все необходимые стили.

Надеюсь, это поможет.

...