Unable to get selected value from ion-select in Ionic

4
votes

I am trying to get the selected option Value from ion-select
but when I select any value from ion-select I am getting Undefined value since I am new to ionic
I was unable to sort it on my own.

HTML:

<ion-item>
   <ion-label>Quantity</ion-label>
   <ion-select [(ngModel)]="number"  
     (ionChange)="onChange(carbrand)" >
      <ion-option *ngFor="let count of quantity" 
       [value]="count" >{{count}}</ion-option>
      </ion-select>
   <!-- <ion-select [(ngModel)]="number">
      <ion-option *ngFor="let count of quantity" 
      value="count"></ion-option>
   </ion-select> -->
</ion-item>

Home.ts : 

onChange(SelectedValue){ 
  console.log("Selected Quantity", SelectedValue); 
}
2
angulartypescriptionic-frameworkionic2ionic3

2 Answers

9
votes

You can also use two other approaches.

1 - Pass $event to your function:

Html:

<ion-item>
    <ion-label>Quantity</ion-label>
    <ion-select [(ngModel)]="number" (ionChange)="onChange($event)" >
      <ion-option *ngFor="let count of quantity" value="count"></ion-option>
    </ion-select>
    <!-- <ion-select [(ngModel)]="number">
      <ion-option *ngFor="let count of quantity" value="count"></ion-option>
    </ion-select> -->
</ion-item>

Ts:

onChange(value){
  console.log(value);
}

2 - Use an Id in your select element:

Html:

<ion-item>
    <ion-label>Quantity</ion-label>
    <ion-select #S [(ngModel)]="number" (ionChange)="onChange(S.value)" >
      <ion-option *ngFor="let count of quantity" value="count"></ion-option>
    </ion-select>
    <!-- <ion-select [(ngModel)]="number">
      <ion-option *ngFor="let count of quantity" value="count"></ion-option>
    </ion-select> -->
</ion-item>

Ts:

onChange(value){
  console.log(value);
}

Hope it helps!

1
votes

that's because onChange is sending your carbrand which is probably undefined. What you need to do is use the class property number that you must have declared as follow :

onChange(){
    console.log("Selected Quantity", this.number); 
}

And remove the carbrand unless it has a value in the template or as class property