Страница не обнаруживает изменения?

Question

Добрый день всем. Пожалуйста, у меня есть страница, которая привязывается к переменной для содержимого. Но я замечаю, что страница не обновляется при изменении переменной. если я не перейду на другую страницу и не вернусь до того, как изменения отразятся. Пожалуйста, мне нужна твоя помощь. Спасибо

моя страница редактирования // использую модальное всплывающее окно ioni c // эта страница обновляет данные пользователя

 async updateUserData(){

    let loading = await this.loadingCtrl.create({
      message: 'Updating...'
     });

     loading.present();
    this.isUserLoggedIn = localStorage.getItem('currentUserId');

    let customerDataUpdated = {
      "first_name": `${this.user.first_name}`,
      "last_name": `${this.user.last_name}`,
      "email": `${this.user.email}`,
      "username": `${this.user.username}`,
      "billing": {

        "address_1": `${this.user.billing.address_1}`,
       "phone": `${this.user.billing.phone}`
      },
    }


   console.log('new update', this.user);  

   //update user data

   this.WC.updateCustomerData(this.isUserLoggedIn, customerDataUpdated).then((data)=>{


    this.changedetector.detectChanges();
    loading.dismiss();  

          setTimeout(()=>{
          this.modalCtrl.dismiss({
            'dismissed': true
          });
      }, 3000);       

     });

страница профиля

// update on edit page does not reflect here unless I navigate to another tab and back

      constructor(private changedetector: ChangeDetectorRef, private WC: WoocommerceService,) {

    // this retrieve user data from api call    
         ngOnInit() {

   this.isUserLoggedIn = localStorage.getItem('currentUserId');
    this.WC.getUserInfo(this.isUserLoggedIn).subscribe((data)=>{
      this.customerData = data;  
    });


    this.WC.profileSubjects.subscribe((data) => {
 //    this.customerData = data;
     console.log('change update ', data);
  });

woocommerce.service.ts

    //getting authenticated users details from woocommerce

    getUserInfo(id){
      this.apiUrl = `${this.siteUrl}${this.woocommercePath}customers/${id}?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
      console.log('API url for retrive customer: ', this.apiUrl);
      this.customerData = this.http.get(this.apiUrl).pipe( retry(1),catchError(this.handleError) );
      return this.customerData;
    }


    // this update user data
        updateCustomerData(id, customerDataUpdated){
          let headers = new HttpHeaders ({
            "Content-Type" : "application/json"
          });
          this.apiUrl = `${this.siteUrl}${this.woocommercePath}customers/${id}?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
         // console.log('API url for retrive customer data: ', this.apiUrl);
          return new Promise((resolve, reject) => {
            this.http.put(this.apiUrl, customerDataUpdated, {headers} ).subscribe(
              response => {
                resolve(response);
                console.log('Customer Data Updated: ', response);
            },
            error => {
              resolve(error);
             console.log('Customer Data Updated failed ', error);
            }
            )
          });
        }


updateCustomerData(id, customerDataUpdated){
  let headers = new HttpHeaders ({
    "Content-Type" : "application/json"
  });
  this.apiUrl = `${this.siteUrl}${this.woocommercePath}customers/${id}?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
 // console.log('API url for retrive customer data: ', this.apiUrl);

  return new Promise((resolve, reject) => {
    this.http.put(this.apiUrl, customerDataUpdated, {headers} ).subscribe(
      response => {
        resolve(response);

        console.log('Customer Data Updated: ', response);
    },
    error => {
      resolve(error);
     console.log('Customer Data Updated failed ', error);
    }
    )
  });

Answer 1

Ваш метод в конструкторе страницы запускается только один раз, когда класс создается впервые, т.е. загрузка страницы, поэтому вам нужно выполнить перезагрузку, чтобы он снова заработал.

Что вам нужно сделать это использовать Subject и сохранить данные в нем в службе, а затем подписаться на него на странице профиля.

Код WooCommerceService:

import { Subject } from 'rxjs'; 

let profileSubject = new Subject<any>();

getUserInfo(id){
  this.apiUrl = `${this.siteUrl}${this.woocommercePath}customers/${id}? 
    consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
    console.log('API url for retrive customer: ', this.apiUrl);
    this.customerData = this.http.get(this.apiUrl);

    // STORE WHATEVER DATA YOU WANT IN THE SUBJECT 
    this.profileSubject.next(this.customerData)
 .pipe(retry(1),catchError(this.handleError) );
   return this.customerData;
}

Profile page:

ngOnInit() {
     this.wc.profileSubject.subscribe(data => {
        // do something with the data
     }
}

Теперь, используя метод Subject, все, что подписчики на profileSubject будут получать обновленные данные по мере их появления, т. е. вы вызываете getUserInfo из любой точки приложения, и новые данные помещаются во все, что подписано.

Существует также BehaviorSubject, который действует практически точно так же но всегда имеет последний доступный фрагмент данных, поэтому новый подписчик всегда получает что-то во время подписки вместо того, чтобы ждать. Это может быть полезно.

Кроме того, сохраняйте конструктор простым, большая часть кода, который вы хотите запустить при загрузке страницы, должна go в ngOnInit, чтобы гарантировать, что все будет доступно к тому времени, когда код попытается получить доступ Это. Это не гарантируется в конструкторе.

Надеюсь, это поможет.