Ionic bug on click event

Ionic Framework ionic-v3
1

i have 4 buttons in a view like that:

<button [style.background-color]="btna"   tappable (click)='choose(1)'>
    {{Ques.a}}
  </button>
  <button [style.background-color]="btnb" tappable (click)='choose(2)'>
    {{Ques.b}}
  </button>
  <button [style.background-color]="btnc" tappable (click)='choose(3)'>
    {{Ques.c}}
  </button>
  <button [style.background-color]="btnd" tappable (click)='choose(4)'>
    {{Ques.d}}
  </button>

each button call the same method in the component when i test the program ,the second button never fire ,and the 3th button act only when a i click on the 4 th button , i think its a bug from ionic .
i dont know what to do .

2

add ion-button to the button tag and remove tappable, like this:

<button ion-button (click)="choose(1)" [style.background-color]="btna">{{Ques.a}}</button>

3

Even how it is now, it is working fine. Maybe your choose method is messed up.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <p>Last Clicked: {{ lastClicked }}</p>
      <button [style.background-color]="btna" tappable (click)="choose(1)">
        {{Ques.a}}
      </button>
      <button [style.background-color]="btnb" tappable (click)="choose(2)">
        {{Ques.b}}
      </button>
      <button [style.background-color]="btnc" tappable (click)="choose(3)">
        {{Ques.c}}
      </button>
      <button [style.background-color]="btnd" tappable (click)="choose(4)">
        {{Ques.d}}
      </button>
    </ion-content>
  `
})
export class HomePage {
  lastClicked: number;
  Ques = {
    a: 'A',
    b: 'B',
    c: 'C',
    d: 'D'
  }
  constructor(public navCtrl: NavController) {
  }

  choose(no: number) {
    this.lastClicked = no;
  }
}
5

thanks i have solved the probleme .