如何从ionic2中的服务更新页面？

Question

I have a service named "user-data", it is responsible to fetch the "user data" when it receives a request.

I have a page which is responsible to show the "user data". When the page is loaded, it gets data and show.

I have a menu, which contains some buttons. Tapping on these button will send a request to the service "user-data" and modify the data. When the data is modified, I want to the page gets notified about the change and adapts the page.

What I do is

• In the service: publish an event named "user: change", and send with the modified data

export class UserData{
    users = [];
    ....
    //- if data is changed, 
    //- publish an event
    setUsers(users) {
        this.users = users;
        this.events.publish('user:change', users);
    }
}

• In the page, subscribe to catch this event

export class UserListPage {
    users = [];

    //- subscribe when the page is about to show
    ionViewWillEnter() {
        this.events.subscribe('user:change', this.updateUsers);
    }

    //- subscribe when the page is about to show
    ionViewDidLeave() {
        this.events.unsubscribe('user:change', this.updateUsers);
    }

    //- update
    updateUsers(userEventData) {

        console.log('About to update');
        if (userEventData[0] instanceof Array) {
             this.users = userEventData[0];
        }
        console.log(this.users);
    }

}

Everything works fine in the function updateUsers , except this.users is not assigned the new value. It's very strange.

Sometimes, when I debug, I got an error like : "attempted to assign to readonly property"

Do you know why?

Answer 1

May I suggest using Observables instead of events? Even though you can accomplish the same with events, since you're using a service to get the data, it would be a better approach. Here you can see the code in this working plunker .

So the communication will be:

Btn / page ---[call the service]---> Service ---[notify other page and send data]---> Page

So in the service, you can create an observable, so other pages can subscribe to it, and be notified when the data is ready.

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class UserDataService  { 

  private getDataObserver: any;
  public getData: any;

  constructor() {
    this.getDataObserver = null;
    this.getData = Observable.create(observer => {
        this.getDataObserver = observer;
    });
  }

  public getUserData() {
    // Fake data to send to the page
    let userList = [
      { id: 1, name: 'user01 '},
      { id: 2, name: 'user02 '},
      { id: 3, name: 'user03 '}]

    // This simulates an http request
    setTimeout(() => {
      // The next method will notify all the subscribers and will 
      // send the data.
      this.getDataObserver.next(userList);
    }, 1000);
  }
}    

The next(...) method will notify to all the subscribers (the other page in this case) and will send it the data.

Then in the other page you just need to subscribe to that observable to be notified when the data is available and call the service like this:

import { Component } from "@angular/core";
import { UserDataService } from 'service.ts';

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  users: any[];

  constructor(private service: UserDataService) {
      // We subscribe to the observable to be notified when
      // the data is ready
        this.service.getData.subscribe((userList) => {
      this.users = userList;
    });
    }

  public getData(){
    this.service.getUserData();
  }
}

Make sure to add the UserDataService in the providers array from the App component, so the same instance will be use in the entire app (singleton service).

import { Component } from "@angular/core";
import { ionicBootstrap, Platform } from 'ionic-angular/index';
import { HomePage } from './home.ts';
import { UserDataService } from 'service.ts';

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [UserDataService]
})
export class MyApp {
  constructor(private platform: Platform) {
    this.rootPage = HomePage;
  }
}

ionicBootstrap(MyApp);

Answer 2

The only thing I am wrong is to write the function to handle "updateUser" in a separate place. The following code works for me:

<pre>
export class UserListPage {
    users = [];

    //- subscribe when the page is about to show
    ionViewWillEnter() {
        this.events.subscribe('user:change', (userEventData){
            console.log('About to update');
            if (userEventData[0] instanceof Array) {
                  this.users = userEventData[0];
            }
            console.log(this.users);
        );
    }

    //- subscribe when the page is about to leave
    ionViewDidLeave() {
        this.events.unsubscribe('user:change', ()=>());
    }

}
</pre>