Ionic 4 how to display updated data inside modal without refresh

Ionic Framework
1

I am updating data into the database but can’t display updated data without refresh. The scenario is user changes the variable ‘quantity’ using select, then this quantity gets updated successfully in the database, Now I want to display price like
database, Now I want to display price like

p.price * p.quantity

without refreshing the page because this is happening inside a modal. Can anyone please help me in acheieving this. Thank you

html


<ion-list>
  <ion-item *ngFor="let p of cart ;  let i=index" class="ion-text-wrap">
      <ion-grid>
        <ion-row class="ion-align-items-center">

          <ion-col size ="6">
            <ion-img class="img" [src]='p.product.image_url'></ion-img>
          </ion-col>


          <ion-col size ="6">

            <ion-row size="3">
              <b>{{p.product.name}}</b>

            </ion-row>

            <br>

            <ion-row>

              <select style="max-width:50%;" (change)="onChange($event.target.value, p) " [value]=p.quantity  > 

                <option  [ngValue] = "q" *ngFor ="let q of quantity" >{{q}}</option>
                </select>
                &nbsp; {{p.product.unit}}


          </ion-row>

            <br>
            <ion-row class="ion-text-end"> 
              {{ p.price * p.quantity | currency:'INR' }}


            </ion-row>
      </ion-item>
      </ion-list>

Ts

onChange(new_quantity,object  ) {

    console.log("Quantity new " + new_quantity)
    console.log("price per kg "  + object.price)
    console.log("Quantity Old " + object.quantity)
    console.log("cart_id " + object.cart_id)


    let cart = {
      cart_id : object.cart_id,
      date : new Date,
      quantity : Number (new_quantity),
      price : object.price,
      user_id : object.user_id,
      product_id : object.product_id
    }

    console.log(cart)
this.cartService.updatecartItem(object.cart_id, cart).subscribe(data =>{
      console.log(data)
    })
2

please provide a valid html

3

Sorry. I just updated question

4

Hello,
Update data without the refresh page.

  quantity = [1, 2, 3, 4, 5]
  price: number;
  myprice: any;
  constructor() { }

  ngOnInit() {
  }

  optionsFn(q: any) {
    console.log(q);
    this.price = 10 * q;
  }

  <ion-item>
    <ion-label>quantity</ion-label>
    <ion-select placeholder="Select One" [(ngModel)]="myprice" (ionChange)="optionsFn(myprice);">
      <ion-select-option [value]="q" *ngFor="let q of quantity">{{q}}</ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item>
    Product price: {{ price }}
  </ion-item>
5

Ok if i get you right you want to refresh the {{ p.price * p.quantity | currency:'INR' }} Part. For that you have to update the p.quantity - Angular will refresh the View automatically.

So in your onChange() Methode, try setting object.quantity to new_quantity.