Изменить содержание на той же странице - PullRequest
0 голосов
/ 23 января 2020

Я пытаюсь отсортировать массив динамически, другими словами, я использую всплывающее окно с 2 вариантами сортировки, и когда я нажимаю на каждый параметр, я сортирую массив и перехожу на ту же страницу, чтобы изменить содержание, но я думаю, что это в кеше, он ничего не делает. Если я перейду на другую страницу, а затем я go вернусь, это изменится. Я даю вам те же скриншоты и код.

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

Ответы [ 2 ]

0 голосов
/ 23 января 2020

Сначала добавьте этот импорт:

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

Следующее добавьте в свой конструктор:

private ref: ChangeDetectorRef

Наконец добавьте это место вместо структуры массива:

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

И это все.

0 голосов
/ 23 января 2020

если вы вызываете тот же URL-адрес ... ваш компонент не перезагружается. Вы не показываете код относительно сортировки, какой метод вы используете? Что это за OrderService.sort?

skipLocationChange просто история навигации ..

...