Ionic framework 更改同一页面上的内容

我尝试对数组进行动态排序，换句话说，我使用带有两个选项的popover进行排序，当我单击每个选项时，我对数组进行排序，然后导航到同一页面以更改内容，但我认为它在缓存中，它什么也不做。如果我导航到另一个页面，然后返回，它就会改变。我给你相同的截图和代码

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

  }

订单服务

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

异步排序（opt:number）{
设day=0；
设月=0；
设年份=0；
让day_i=0；
设月_i=0；
设年份_i=0；
让秩序：秩序；
如果（opt==1）{
for（设i=0；i第一年）{
order=order.arrayOrders[j]；
Order.arrayOrders[j]=Order.arrayOrders[i]；
订单.排列商[i]=订单；
}否则如果（年份==第一年）{
月份i=编号（Order.arrayOrders[j].创建日期.split（'/'）[1]）；
如果（月份>第一个月）{
order=order.arrayOrders[j]；
Order.arrayOrders[j]=Order.arrayOrders[i]；
订单.排列商[i]=订单；
}else if（月==第一个月）{
day_i=编号（Order.arrayOrders[j].创建_date.split（'/'）[0]）；
如果（天>天）{
order=order.arrayOrders[j]；
Order.arrayOrders[j]=Order.arrayOrders[i]；
订单.排列商[i]=订单；
}
}
}
}
}
}否则{
for（设i=0；i

异步getCustomerOrders（）{ 让url=“订单/客户”； 让token=“”； 让状态=200； 等待这个.authService.getSessionToken（）。然后（data=>token=data）； /** *声明del头http */ 让reqHeader=新的HttpHeader({ “内容类型”：“应用程序/json”， “授权”：“持票人”+代币 }); 顺序排列器拼接（0）； /** *声明参数 */ //结构与过程的关系 等待这个.http.get（`${APIREST}`+url，{headers:reqHeader，params}）.toPromise（）。然后（数据=>{ 让jsonArray:any=data； for（设i=0；i{ 状态=错误状态； }); 返回状态； }

---

如果调用相同的url。。。您的组件未重新加载。 您没有显示有关排序的代码，您使用哪种方法？这是什么

OrderService.sort

skipLocationChange

只是关于导航历史记录。

首先添加此导入：

import { ChangeDetectorRef } from '@angular/core';

下一个添加到构造函数中：

private ref: ChangeDetectorRef

最后，将其添加到数组结构应更改的位置：

this.ref.detectChanges(); // trigger change detection cycle

---

仅此而已。

OrderService.sort它是一个标志[0,1]，因此我检查0从低到高和1从高到低。分拣代码在服务上。我是爱奥尼亚的新手，我只是在学习，对不起。我编辑了这篇文章，并添加了排序代码。我已经这样做了，但不起作用。问题是我在服务而不是页面上对数组进行排序。欢迎随时使用

this.ref.detectChanges(); // trigger change detection cycle