Observable not updating the UI

Ionic Framework ionic-v3
1

Hello together,

i have the issue that observable doesnt trigger UI refresh. But this behaviur is only if im not use the standard browser(ionic serve).
Following Examples:

Works with workaround ngzone-run:

export class HomePage extends SubscribeAndGuard
{
  public taskProcessTypeCode: typeof TaskProcessTypeCode = TaskProcessTypeCode;
  public isOnline: boolean;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private translateService: TranslateService,
    private _store: Store<States>,
    private appActions: AppActions,
    private ngZone: NgZone
  )
  {
    super();
    this._store.select(state => state.appState.isOnline).subscribe(online => this.ngZone.run(() => this.isOnline = online));
  }

HTML

<ion-title text-center>{{ 'HOME' | translate }} {{(isOnline)}}</ion-title>

Works not:

export class HomePage extends SubscribeAndGuard
{
  public taskProcessTypeCode: typeof TaskProcessTypeCode = TaskProcessTypeCode;
  public isOnline: Observable<boolean>;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private translateService: TranslateService,
    private _store: Store<States>,
    private appActions: AppActions
  )
  {
    super();
    this.isOnline = this._store.select(state => state.appState.isOnline);
  }

HTML

<ion-title text-center>{{ 'HOME' | translate }} {{(isOnline | async)}}</ion-title>

Do i anything wrong here?

Thanks and Kind Regards,
Keyjin

2

Better to subscribe using the async pipe and a getter.

get nameOfObservable() { // define your Observable you want to subscribe to in the ts file }

<div>Look at this: {{nameOfObservable | async}}</div>
3

Thanks. Did it, but it doesnt work :frowning:

4

Then there’s something going on that you haven’t posted. I’m running ngrx/store and this works fine on real devices.

5

Yeah. Ok… do you have skype or something maybe we can make a call :slight_smile:

6

Just follow any official sample project for ngrx if that’s where your Store injector is coming from. Edit to add: I will say, you might be causing yourself problems by using super(). The first thing I would do if I had that problem would be to refactor the code so I didn’t use super() anywhere.

7

but this is not related to ngrx. This is just a ionic native plugin. Super has no effect on that. Already tried it.

export class HomePage
{
  public taskProcessTypeCode: typeof TaskProcessTypeCode = TaskProcessTypeCode;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private translateService: TranslateService,
    private _store: Store<States>,
    private appActions: AppActions
  )
  {
  }

  private syncTasks()
  {
    this._store.dispatch(this.appActions.sync());
  }

  private syncTasksRefresher(refresher)
  {
    this._store.dispatch(this.appActions.sync())
    refresher.complete();
  }

  private countForTaskType(taskProcessTypeCode: TaskProcessTypeCode): Observable<number>
  {
    return this._store.select(state => state.tasks).switchMap((tasks: Task[]) => Observable.from(tasks)
      .count((task: Task) =>
      {
        return task.taskProcessTypeCode == taskProcessTypeCode.toString() && !!task.responsibleUser;
      })
    );
  }

  private isOnline(): Observable<boolean>
  {
    return this._store.select(state => state.appState.isOnline);
  }

  private logout()
  {
    this._store.dispatch(this.appActions.logout());
  }

  private openUserSettings()
  {
    this.navCtrl.push('usersettings');
  }

  private openTaskList(taskProcessTypeCode)
  {
    this.navCtrl.push('tasks', { taskProcessTypeCode: taskProcessTypeCode });
  }
}
8

It’s hard to believe that you want help if you don’t include the name of the plugin in the title, in your OP, or in any subsequent post. Also, I think it’s likely that you do not understand what effect Angular page inheritance has on your project.

9

im sry. No im relative new to ionic. Can you say me please what you need? I also tried it with following Code but same result in platform browser & android

export class HomePage
{
  public taskProcessTypeCode: typeof TaskProcessTypeCode = TaskProcessTypeCode;

  public online: boolean = false;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private translateService: TranslateService,
    private _store: Store<States>,
    private appActions: AppActions,
    private network: Network
  )
  {
    this.network.onConnect().subscribe(() => { this.online = true; console.log('online') });
    this.network.onDisconnect().subscribe(() => { this.online = false; console.log('offline') });
  }

HTML:

export class HomePage
{
  public taskProcessTypeCode: typeof TaskProcessTypeCode = TaskProcessTypeCode;

  public online: boolean = false;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private translateService: TranslateService,
    private _store: Store<States>,
    private appActions: AppActions,
    private network: Network
  )
  {
    this.network.onConnect().subscribe(() => { this.online = true; console.log('online') });
    this.network.onDisconnect().subscribe(() => { this.online = false; console.log('offline') });
  }

So now there is no ngrx store etc between.
Logs in console get written as expected.

Thanks and Kind Regards,
Christoph

10

Does the word “get” appear in any of the code you’ve tried?

11

thanks for your response. Yes

  get isOnline(): Observable<boolean>
  {
    return this._store.select(state => state.appState.isOnline);
  }

<ion-title text-center>{{ 'HOME' | translate }} {{(isOnline | async)}}</ion-title>

EDIT: As in OP mentioned in ionic serve everything works as expected but on platform android/browser not