ionic 4 how to display updated data inside modal without refresh

Question

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

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)
    })
  }

Answer 1

Use span or p inside the row and have the [innerHTML] binding... check this thread as example Angular HTML binding , note that interpolation is not executed every time... the input binding is executed every time the value changes, so it should update once you're setting it up

Answer 2

As asynchronous behaviour of ionic & angular, I just changed object.quantity to the new quantity and angular in the background takes care of everything like this

object.quantity = new_quantity;