Mohan Gopi Mohan Gopi - 2 months ago 41
TypeScript Question

How to get the value from ion-select option

I have an array of object called options.

this is my html code

<ion-item>
<ion-label>place</ion-label>

<ion-select [(ngModel)]="place" (click)="optionsFn(item);">
<ion-option value="item" *ngFor="let item of options">{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
</ion-select>
</ion-item>

{{salespriceOp}}

{{quantityOp}}


this is my .ts file code

product_option_value_idOp
priceOp
salespriceOp
quantityOp
skuOp
nameOp

options = [
{
"product_option_value_id": "45",
"name": "Bangalore Auto",
"quantity": "12",
"sku": "56876",
"price": "100.00",
"salesprice": "50"
},
{
"product_option_value_id": "51",
"name": "Hyderabad Auto",
"quantity": "23",
"sku": "56543",
"price": "200.00",
"salesprice": "60"
},
{
"product_option_value_id": "52",
"name": "Delhi Auto",
"quantity": "14",
"sku": "98767",
"price": "300.00",
"salesprice": "80"
}
];
constructor(public navCtrl: NavController) {

}

optionsFn(item) {//here item is an object
console.log(item);
this.product_option_value_idOp = item.product_option_value_id;
this.priceOp = item.price;
this.salespriceOp = item.salesprice;
this.quantityOp = item.quantity;
this.skuOp = item.sku;
this.nameOp = item.name;
}



i am able to invoke the function but i am getting undefined in
console.log(item)


Answer

There were several things that together caused that error. Please take a look at this working plunker.

The first change there is that instead of using the click event like this:

(click)="optionsFn(item);

You should use the ionChange event that Ionic exposes like this:

(ionChange)="optionsFn();"

Also notice that since you use the [(ngModel)]="place" to bind the select element to one of your component's properties, you don't need to send the item as a parameter, because this.place will be the selected item when the ionChange event is triggered.

That's why your optionsFn method would look like this:

public optionsFn(): void { //here item is an object 
    console.log(this.place);

    let item = this.place; // Just did this in order to avoid changing the next lines of code :P

    this.product_option_value_idOp = item.product_option_value_id;
    this.priceOp = item.price;
    this.salespriceOp = item.salesprice;
    this.quantityOp = item.quantity;
    this.skuOp = item.sku;
    this.nameOp = item.name;
  }