Geek Answers Handbook

How to get the value using the ion select function

I have an array of objects 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 can call the function, but I get undefined in console.log(item)

+4
source share
3 answers

There were several things that caused this error together. The first change is that instead of using the click event:

 (click)="optionsFn(item);

You should use the ionChange event, which Ionic throws as follows:

 (ionChange)="optionsFn();"

Also note that since you use [(ngModel)]="place" to bind the select element to one of your component properties, you do not need to send this element as a parameter because this.place will be the selected element if ionChange .

This is why your optionsFn method will 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; }
+6
source

Use (ngModelChange) instead of (click) event.

 (ngModelChange)="optionsFn()"

whenever the model value has changed, ngModelChange will automatically call the relative function.

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

Check after making the changes below:

// change html

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

//. ts change

 optionsFn() { console.log(this.gaming); let item = this.gaming; 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; }
-1
source

More articles:


All Articles