Change function with ion-selection-option

Question

Change function with ion-selection-option

Navigation

#1 by (2 votes)

4

Alright? I'm having difficulties, I hope you can help me ... I'm studying Ionic 2 very soon and thought of making a simple application. In JavaScript I did it quietly, but with Ionic does not work. It is the onChange () method that in ionic I believe is the ionChange (I researched), but I can not get it to work. I want that when selecting the "race" () "Humans" () the console will display a "Done Right" message. Very simple, but I can not.

HMTL:

<ion-list>
   <ion-item>
    <ion-label>Raças</ion-label>
      <ion-select id="racas" [(ngModel)]="racas" (ionChange)="teste();">
        <ion-option value="humanos">Humanos</ion-option>
        <ion-option value="anoes">Anões</ion-option>
        <ion-option value="elfos">Elfos</ion-option>
        <ion-option value="gnomos">Gnomos</ion-option>
        <ion-option value="meio-elfos">Meio-elfos</ion-option>
        <ion-option value="meio-orcs">Meio-orcs</ion-option>
        <ion-option value="halfling">Halfling</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

TS:

export class HomePage {
  public racas:string;

  teste(racas:string) {
    let x = (<HTMLInputElement>document.getElementById("racas")).value;
      if (x == "humanos") {
        console.log("Deu Certo!");
      }
  }
}

typescript angular ionic2

asked by anonymous 09.05.2017 / 02:23

1 answer

HTTP Error 403.7 Forbidden - SEFAZ RS Select (combobox) Dynamic

score 2 · Accepted Answer

As you already are doing Two-way binding in racas , just access it as follows:

export class HomePage {
  public racas:string;

  teste() {
      if (this.racas == "humanos") {
        console.log("Deu Certo!");
      }
  }
}

See working in plnkr

@edit

If I was not doing a bind, how would it look?

If you were not doing it with Two-way binding , it would be as follows using event binding :

<ion-list>
   <ion-item>
    <ion-label>Raças</ion-label>
      <ion-select (ionChange)="teste($event);">
        <ion-option value="humanos">Humanos</ion-option>
        <ion-option value="anoes">Anões</ion-option>
        <ion-option value="elfos">Elfos</ion-option>
        <ion-option value="gnomos">Gnomos</ion-option>
        <ion-option value="meio-elfos">Meio-elfos</ion-option>
        <ion-option value="meio-orcs">Meio-orcs</ion-option>
        <ion-option value="halfling">Halfling</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

HomePage.ts

export class HomePage {
  teste(racas: any) {
      console.log(racas);
  }
}