How To Select Any Quantity And It's Value Get's Changed?

I am new to ionic 3 and want to know about the code please help me out guy's. I want to select any item and it's value get's changed subtotal may reflect's to it output. cart.ts pr

Solution 1:

You can use 2-way data-binding using [(ngModel)] as

<selectclass="sel" (change)="firstDropDownChanged()" [(ngModel)]="selectedValue"><option *ngFor='let v of _values1' [ngValue]="v">{{ v }}</option></select>

So, on every change of option, the current value of selected option will be in selectedValue variable. Use in .ts file as

firstDropDownChanged() {
   this.currentPrice = this.product.subtotal * this.selectedValue;
    console.log(this.currentPrice);
    this.product.subtotal =this.currentPrice;
  }

Stackblitz Demo using ngModel

Solution 2:

Try this in TS

this.currentPrice = this._values1.map((value: number) => { 
      return parseInt(this.product.subtotal) * value 
    });

And in HTML add below in Select

(change)="firstDropDownChanged($event.target.value)"

Solution 3:

you can try like this i hope it helps you out

TS

currentPrice: number = 0;
private _values1 = [" 1 ", "2", " 3 "," 4 "," 5 "," 6 "];

firstDropDownChanged(data: any) 
{
  this.currentPrice = +this.product.subtotal * +data.target.value;
  console.log(this.currentPrice);
  this.product.subtotal = this.currentPrice;
}

HTML

<selectclass="sel" (change)="firstDropDownChanged($event)"><option *ngFor='let v of _values1'>{{ v }}</option></select>

let me know if it is working or not

Solution 4:

Here you need to pass the selected value using $event.target.value in your firstDropDownChanged() method like below

component.ts

private _values1 = [1, 2,3, 4, 5, 6];
 currentPrice = 10;
 product = {
   subtotal : 10,
   _values1 : 1
 }
  firstDropDownChanged(_values1: any) {
   this.currentPrice = this.product.subtotal * _values1;
    console.log(this.currentPrice);
    this.product.subtotal =this.currentPrice;
    console.log(this.product._values1);

  }

component.html

<selectclass="sel" (change)="firstDropDownChanged($event.target.value)"><option *ngFor='let v of _values1'>{{ v }}</option></select>

Here is stackblitz link

Hope this will help!