Ionic and auto content refresh

Hi,
i’m developing an Ionic 6 APP with e-commerce functionality.

For summary i have 2 page: ListPage and WishListPage

ListPage
I do an http client request to get list of items (on ngOnInit.) and show data this way:
<ion-item inset="true" *ngFor="let item of results | async" (click)="itemTapped($event, item)" lines="none" shape="round" class="ion-margin-bottom ion-margin-start ion-margin-end">

WishlistPage
Show a list of items readed from a WishlistService service where i have:

  private items = []; /*this is where i push items tapped/added clicking on items list*/
  private itemsCount = new BehaviorSubject(0);
  private itemsTotal = new BehaviorSubject(0);

To show wishlist items i use this code where wishlistItems is WishlistService.items:
<ion-item inset="true" *ngFor="let item of wishlistItems" (click)="itemTapped($event, item)" lines="none" shape="round" class="ion-margin-bottom ion-margin-start ion-margin-end">

For every item i show a badge with quantity and i can update quantity or delete item
When add, subtract or remove quantity from items, i don’t know how, template show automatically items not removed or updated and this is OK.

My problems are:

1. In ListPage how can i merge information from http response and wishlist items to show badge quantity, without making http request again?

2. In ListPage tapping item i show a modal to set quantity and add item to wishlist and this work but: How i can show/update badge quantity on that item?

3. In WishListPage i can manipulate wishlist items (remove or update quantity), but when go back to previous ListPage how can update items badge with updated quantity?

At this moment to add to ListPage items quantity from wishlist items i do this:

  __mixItemsWithWishlist(){

        //TODO: trasofrmazione in funzione e..
        this.results = this.response.pipe(
          map(res => {
             const els = res; 
             els.forEach(item => {
               let x = 0;
               let arr = this.wishlistItems./*value.*/filter(x => {
                 return x.id == item.id;
               });
               if (arr.length > 0)
                 x = arr[0].quantity;
               item.wishlist_quantity = x;
             });
             return els;
           })
         );
         this.spinner = false;
     
  }

but calling this function on every itemtapped do an HTTP request and do a refresh of entire view (visually bad)

Thanks for all

1 post - 1 participant

Read full topic