CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
ashley
ashley

Reputation: 1038

updating template based on network status ionic

I want to be able to update an ionic page based on the network status. the function is being called but the page is not being updated. Grateful if some advice can be given.

Message Service that sends the messages to all subscribers.

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

/*
  Generated class for the MessageProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class MessageProvider {

  private subject = new Subject<any>();
  constructor() {}

  sendMessage(message: string) {
    this.subject.next(message);
  }

  clearMessage() {
    this.subject.next();
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }
}

The code to watch the network status is as follows and are found in app.component

network.onDisconnect().subscribe(() => {
        console.log(0);
        MessageProvider.sendMessage('Not Connected!');
      });

network.onConnect().subscribe(() => {
        console.log(1);
        MessageProvider.sendMessage('Connected!');
      });

The message is being transmitted to the page.ts but the UI is not getting updated.

message: any;
subscription: Subscription;
    ionViewDidLoad() {
        this.subscription = this.MessageProvider.getMessage().subscribe(message => {
          console.log(message); 
          this.message = message; 
        });
      }

The template is as per below

  <p>
    {{message}}
  </p>

Upvotes: 0

Views: 179

Answers (2)

MichaelSolati
MichaelSolati

Reputation: 2872

It's possible that we're having an issue with Zone here. Try updating your component to the following to rerun zone on change.

message: any;
subscription: Subscription;

constructor(private _zone: NgZone) {}

ionViewDidLoad() {
   this.subscription = this.MessageProvider.getMessage().subscribe(message => {
      console.log(message); 
      this._zone.run(() => {
         this.message = message; 
      });
   });
}

Just add the following import to the top of your page.component.ts

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

Upvotes: 2

MikeyBeLike
MikeyBeLike

Reputation: 833

I think the issue is because with typescript when using the fat arrow, when compiled into normal js it creates a copy of 'this' and renames your 'this' into '_this' which isn't a complete reference to your initial 'this', just a copy.

If you check your compiled code, i'm sure if you did this:

console.log(this.message);

You would get an undefined value as when compiled into js it will actually output console.log(_this.message);

Which doesn't exist

I'm learning about this myself and I think the easiest solution would be to create another setter method which you can pass the value to and set your property from.

e.g

ionViewDidLoad() {
   this.subscription = this.MessageProvider.getMessage().subscribe(message => {
      this.setMessage(message);
    });
}

setMessage(message) {
   this.message = message;
}

Upvotes: 1

Related Questions