Http, promise, observable, | async : view don't update, why?

Ionic Framework ionic-v3
1

Hello,
new to ionic, i’m trying to build an app (ionic2,ng2,ts) with Http calls, every thing is working fine exept that view doesn’t update, i’ve tried a lot of things but never succeed.

Here is what i did, at first using a simple promise :

** api.service**

public getUserList(){ 
          console.log('getUserList');
          return this.http.post(this.buildURL('listUsers'), '', { headers: this.contentHeader })
          .map(res => res.json());
      }

userPage
public getDatas(){ // without | async pipe

 this.api.getUserList().subscribe(
        data => {
            this.asyncItems = data;
        },
        err => this.errorGetDatas(err)
      );
}

the view

<ion-item  *ngFor="#item of asyncItems"  (click)="openEditUser(item)">

    {{item.id}} {{item.firstname}}  {{item.lastname}}  
  </ion-item>

Works fine at init but don’t update, so i tried with async pipe

userPage

public getDatas(){
   this.asyncItems = this.api.getUserList();
}

the view

<ion-item  *ngFor="#item of asyncItems | async"  (click)="openEditUser(item)">

    {{item.id}} {{item.firstname}}  {{item.lastname}}  
  </ion-item>

Works fine at init but don’t update, again, so i tried that way
** api.service**

public getUserListPromise(){
      return this.http.post(this.buildURL('listUsers'), '', { headers: this.contentHeader })
      .toPromise()
      .then(res =>res.json() , this.handleError)
      .then(data => { console.log(data); return data; }); 
  }

userPage

public getDatas(){
this.asyncItems = this.api.getUserListPromise();
}

the view

<ion-item  *ngFor="#item of asyncItems | async"  (click)="openEditUser(item)">

    {{item.id}} {{item.firstname}}  {{item.lastname}}  
  </ion-item>

First i call getData() and it’s ok : view displays datas, then i try to edit datas (using a form in a modal) and here again every thing works fine (according to the console) and i call again getData() and here again datas are displayed in the console but the view still displays the initial values … Does someone can help me on this point? Is this a bug ? Did i missed something?

2

Angular 2 watches on object pointer. It runs rendering when the pointer is changed. Only the pointer, not the content.

3

Thank you for the response @xr0master, but i don’t understand how to use this, how can i change the pointer here, it’ll always be the same object, only the content change.
Can you be more precise about this?

4

Hi @PierreP did you get this working??? I am having the same problem.
@xr0master can you give an example or a reference to anything.

5

hi @imatefx ,
i found a solution using observables :

in the service :

public USERS$ : Observable<UserModel[]>;
private _dataStore : {users: UserModel[]};
private _UsersObserver : Observer<UserModel[]>;  

//constructor
this.USERS$ = new Observable(
                observer =>this._UsersObserver = observer).share();

//when i update data
this._dataStore.users = data;
 this._UsersObserver.next(this._dataStore.users);

in the component :

private ngOnInit() { 
       
        this.userService.USERS$.subscribe(updatedUsers => this.users = updatedUsers);
        this.userService.get();
        
    }

I guess there can be best practice but this works, users is updated every time the service updates datas and others components that suscribes to USERS$ too.

Hope it helps.

6

Hi Pierre

Am trying to implement observable with the following class like Your solution

import {Injectable, } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import {Observer} from 'rxjs/Observer';

@Injectable()
export class CalendarService {

dataChange: Observable<any>;
dataChangeObserver: Observer<any>;

constructor() {
    this.dataChange = new Observable((observer) => {
        this.dataChangeObserver = observer;
    }).share();
}

setDate(date: any) {
    this.dataChangeObserver.next(date);
}
}

When calling setDate() with a value am getting the following error

ORIGINAL EXCEPTION: TypeError: Cannot read property ‘next’ of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property ‘next’ of undefined

Any idea why dataChangeObserver is undefined?

7

Hi,
last versions of ionic solve the problem, you don’t need this anymore.

8

Hi PierreP, what do You mean. How does Ionic 2 RC solve my observable issue?

9

I think your issue is due to the fact that observables and observers needs to be arrays.
Last version don’t solve your observer problem but you don’t need observer anymore to get a live var in your view.