How do make ionic app detech change when update is made?

@Geelario wrote:

Good day house, please I need your help, I noticed that my ionic app doesn’t detect change when an update is made. I have a profile page that displays authenticated users data from an api( i.e username and email). Also, a profile_edit page that updates user data. But I noticed that when I update user data and navigate to the profile page, the change doesn’t reflect on the profile page unless I navigate to another page and back before it detects the change. I tried using BehaviourSubject but I don’t really know how to implement it. I have spent days on this, please I need your assistance. Thanks. My code below

profile.page.ts

  public  customerData: any

  constructor ( WC: WoocommerceService) {
   }

  ngOnInit() {


// this retrieve authenticated user id
    this.isUserLoggedIn = localStorage.getItem('currentUserId');

// this retrieve user data  from an api call
    this.WC.getUserInfo(this.isUserLoggedIn).subscribe((data)=>{

      this.customerData = data;  

    });

  }

profile.html

 <ion-col size="12">
    <ion-label *ngIf="customerData" class="ion-text-center">
      <p>{{ customerData.first_name}} {{ customerData.last_name}}</p>
      <ion-card-subtitle>{{customerData.email}}</ion-card-subtitle>
    </ion-label>
  </ion-col>

woocommerce service page

export class WoocommerceService {

 private authenticationState = new BehaviorSubject<any>([]);
  data = this.authenticationState.asObservable();

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

 // STORE WHATEVER DATA YOU WANT IN THE SUBJECT 

   this.authenticationState.next(this.customerData);

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

        this.authenticationState.next(this.customerData);

        console.log('Customer Data Updated: ', response);
    },

    error => {

      resolve(error);

     console.log('Customer Data Updated failed ', error);

    }

    )

  });

}
}

Posts: 1

Participants: 1

Read full topic