Bdtjtk

I am using Angular 5 and ionic 3, what I am trying to do is to populate an object following a response endpoint, like this:

user.service.ts

public UserInfo: UserData = {

    id: null,

    username: null,

    email: null,

    subscribeData: null,

    brand: null,

    fiscalcode: null,

};



populateBaseUserInfo(user) {

    this.UserInfo.id = user._id;

    this.UserInfo.username = user.username;

    this.UserInfo.subscribeData = user.subscribeData;

    this.UserInfo.email = user.email;

    console.log(JSON.stringify(this.UserInfo));

} 

The response in console.log is ok:

but when I try to take the object in the component, the object returns all the fields as null...

user.component.ts

import { UserService } from '../../service/user.service';

@Component({

 providers: [UserService]

})

export class MainPage {

   public localUser: UserData;



   constructor(private UserService : UserService, ) {

       this.localUser = this.UserService.UserInfo;

   }

)

user.html

{{localUser | json}}

So, what am I doing wrong? What needs to be done to see the object json in the component as the same from the response?

Thank you

I think the problem there is that since you are just changing properties in your object you are not triggering the change detection, I'm sure that everything would work if instead of returning the reference your service method return a copy of that object ( for example make UserInfo a getter that return lodash clone of that object ) notice that is not the right solution even if it's solve your problem. Would be better if every time you call populateBasicUserInfo you just create a new object with the desired info instead of just replacing the property . In this way as I was saying since you change the reference it will run the detection.

I solved, the main problem was that "userInfo" was not recognized as a singleton, due to version of angular (5), i can't use the providein:root parameter in the injectable of the service, so this is what i have done:

-move provider of the service inside the app.module and remove from component

-use Behaviorsubject rxjs as the follow inside service:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

  public UserInfo = new BehaviorSubject<any>({

    _id : null,

    username : null,

    email : null,

    data : null,

    brand : null,

    fiscalcode : null

});

user = this.UserInfo.asObservable();



populateBaseUserInfo(user : any){

    this.UserInfo.next(user)

    console.log(JSON.stringify(this.UserInfo));

}; 

here the code component where i call "populateBaseUserinfo"

this.UtentiService.populateBaseUserInfo( this.risposta );

and here another component where i call the information updated within observable:

   this.UtentiService.user.subscribe(user =>{

    this.localUser = user;

   })