Change content on the same page - ionic-framework

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..

Answer 2

First add this import:
import { ChangeDetectorRef } from '#angular/core';
Next add in your constructor :
private ref: ChangeDetectorRef
Finally add this in the place of the array structure should change :
this.ref.detectChanges(); // trigger change detection cycle
    
And thats all.