Change content on the same page

Question

i'm trying to sort an array dynamically, in other words, I'm using a popover with 2 options to sort and when i click on each options, i sort the array and i navigate to the same page to change the content but i think it is in cache it does nothing. If i navigate to other page and then i go back it changes. I let you same screenshots and the code.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterModule } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage';
import { TranslateModule } from '@ngx-translate/core';
import { ComponentsModule } from './components/components.module';
import { Globalization } from '@ionic-native/globalization/ngx';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
  declarations: [AppComponent,],
  entryComponents: [],
  imports: [
    BrowserModule, IonicModule.forRoot(), AppRoutingModule, 
    HttpClientModule, IonicStorageModule.forRoot(), 
    TranslateModule.forRoot(), ComponentsModule, NgxDatatableModule,
    RouterModule.forRoot(routes, { initialNavigation : false }), //I get here error on routes and i dont know why
  ],
  providers: [
    Globalization,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent,]
})
export class AppModule {}

orders.page.ts

async showPopOver(evento){
    const popover = await this.popoverController.create({
      component: PopOptionsComponent,
      event: evento,
      mode: 'ios',
      backdropDismiss:false
    });

    popover.present();
}

pop-options.component.ts

selectedOpt(index: number){ //Onclick on any option
    console.log('item: ', index);

    this.popoverCtrl.dismiss({
      item: index
    });
    if(index != OrderService.sort){ //check if the selected option is already in use
      OrderService.sort = index;

      this.router.navigate(['category/orders'], {skipLocationChange: false});
    }

  }

order.service.ts

async sortArray(opt: number) {
    let day = 0;
    let month = 0;
    let year = 0;

    let day_i = 0;
    let month_i = 0;
    let year_i = 0;

    let order: Order;
    if (opt == 1) {
      for (let i = 0; i < Order.arrayOrders.length; i++) {
        year = Number(Order.arrayOrders[i].creation_date.split('/')[2]);
        month = Number(Order.arrayOrders[i].creation_date.split('/')[1]);
        day = Number(Order.arrayOrders[i].creation_date.split('/')[0]);

        for (let j = 0; j < Order.arrayOrders.length; j++) {
          year_i = Number(Order.arrayOrders[j].creation_date.split('/')[2]);
          if (year > year_i) {
            order = Order.arrayOrders[j];
            Order.arrayOrders[j] = Order.arrayOrders[i];
            Order.arrayOrders[i] = order;
          } else if (year == year_i) {
            month_i = Number(Order.arrayOrders[j].creation_date.split('/')[1]);
            if (month > month_i) {
              order = Order.arrayOrders[j];
              Order.arrayOrders[j] = Order.arrayOrders[i];
              Order.arrayOrders[i] = order;
            } else if (month == month_i) {
              day_i = Number(Order.arrayOrders[j].creation_date.split('/')[0]);
              if (day > day_i) {
                order = Order.arrayOrders[j];
                Order.arrayOrders[j] = Order.arrayOrders[i];
                Order.arrayOrders[i] = order;
              }
            }
          }
        }
      }
    } else {
      for (let i = 0; i < Order.arrayOrders.length; i++) {
        year = Number(Order.arrayOrders[i].creation_date.split('/')[2]);
        month = Number(Order.arrayOrders[i].creation_date.split('/')[1]);
        day = Number(Order.arrayOrders[i].creation_date.split('/')[0]);

        for (let j = 0; j < Order.arrayOrders.length; j++) {
          year_i = Number(Order.arrayOrders[j].creation_date.split('/')[2]);
          if (year < year_i) {
            order = Order.arrayOrders[j];
            Order.arrayOrders[j] = Order.arrayOrders[i];
            Order.arrayOrders[i] = order;
          } else if (year == year_i) {
            month_i = Number(Order.arrayOrders[j].creation_date.split('/')[1]);
            if (month < month_i) {
              order = Order.arrayOrders[j];
              Order.arrayOrders[j] = Order.arrayOrders[i];
              Order.arrayOrders[i] = order;
            } else if (month == month_i) {
              day_i = Number(Order.arrayOrders[j].creation_date.split('/')[0]);
              if (day < day_i) {
                order = Order.arrayOrders[j];
                Order.arrayOrders[j] = Order.arrayOrders[i];
                Order.arrayOrders[i] = order;
              }
            }
          }
        }
      }
    }
  }

async getCustomerOrders() {


    let url = "orders/customer";
    let token = "";
    let status = 200;
    await this.authService.getSessionToken().then(data => token = data);

    /**
     * Declaracion del header http
     */
    let reqHeader = new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + token
    });

    Order.arrayOrders.splice(0);

    /**
     * Declaracion params
     */


    //Obtenemos la configuracion y la procesamos
    await this.http.get(`${APIREST}` + url, { headers: reqHeader, params }).toPromise().then(data => {

      let jsonArray: any = data;
      for (let i = 0; i < jsonArray.length; i++) {
        let statusLabel = "";
        if (jsonArray[i].status == 1) {
          statusLabel = Language.arrayLanguage[centinelLang].createdOrderStatus;
        } else if (jsonArray[i].status == 2) {
          statusLabel = Language.arrayLanguage[centinelLang].productionOrderStatus;
        } else if (jsonArray[i].status == 3) {
          statusLabel = Language.arrayLanguage[centinelLang].shippedOrderStatus;
        } else if (jsonArray[i].status == 4) {
          statusLabel = Language.arrayLanguage[centinelLang].deliveredOrderStatus;
        }
        let order = {
          order_id: String(jsonArray[i].order_id),
          order_amount: Number(jsonArray[i].amount),
          creation_date: String(jsonArray[i].creation_date),
          status: statusLabel,
          order_customer_cod: String(jsonArray[i].customer_cod)
        }
        Order.arrayOrders.push(order);
      }
      this.sortArray(OrderService.sort); //here is where i sort the arry
    }).catch(err => {
      status = err.status;
    });

    return status;
  }

Answer 1

if you call the same url... your component is not reloaded. You don't show the code regarding the sorting, which method do you use ? What is this OrderService.sort?

skipLocationChange is just about the navigation history..