Angular2 / Ionic2 / TypeScript "two way" binding not updated if i use as reference in async function

Question

I created a simple class in TypeScript:

export class LoginInformation {

    private _UserName: string;

    public get userName(): string {
        return this._UserName
    }

    public set userName(v: string) {
        this._UserName = v;
    }
}

Then i can instantiate the class:

private _LoginInformation: LoginInformation;
this._LoginInformation = new LoginInformation();

(and also implement the getter and setter), then assign a value

this.loginInformation.userName = "User1";

Now I can use the Object in my HTML:

<ion-item>
    <ion-input type="text" placeholder="Name" [(ngModel)]="loginInformation.userName"></ion-input>
</ion-item>

Now i can change my Object-Property

this.loginInformation.userName = "User2";

and the screen is updated in the expected way. Even if i set:

var self: LoginInformation = this.loginInformation;
self.userName = "User3";

everything is OK. But if I use an async function (e.g. get a value from the app preferences - plugin)

this._AppPreferences.fetch(
    (value) => {
        self.userName = "User4";
    },
    (error) => {
        alert("Error loading Configuration: " + error);
    },
    "LoginInformation");

the on-screen value is not updated. I thought that the assignment of the reference

self: LoginInformation = this.loginInformation

Should work in the expected way. But it seems that something is missing.

Any ideas what I'm doing wrong?

I think you try to give the same reference again, thats why it is not changing... try to clone/copy the loginInformtaion. — eesdil
– eesdil, Commented Mar 14, 2016 at 21:29
this._LoginInformation or this.loginInformation, which is it? How does fetch() work? Is it called inside the Angular zone? If not, try adding ApplicationRef.tick(), angular.io/docs/ts/latest/api/core/ApplicationRef-class.html, to force change detection to run. — Mark Rajcok
– Mark Rajcok, Commented Mar 15, 2016 at 15:28

Michael Desigaud · Accepted Answer · 2016-03-15 08:53:48Z

1

You don't need to use self.userName, you should be able to use this.userName since you are in an arrow function:

this._AppPreferences.fetch(
    (value) => {
        this.userName = "User4";
    },
    (error) => {
        alert("Error loading Configuration: " + error);
    }
);

answered Mar 15, 2016 at 8:53

Michael Desigaud

2,1451 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sam Vloeberghs · Accepted Answer · 2016-09-05 08:04:51Z

0

Don't instantiate the service by yourself. You might end up having several instances instead of a singleton. Use NG2's dependency injection to do that automagically for you!

import { Injectable } from '@angular/core';
@Injectable()
export class LoginInformation {

    private _UserName: string;

    public get userName(): string {
        return this._UserName
    }

    public set userName(v: string) {
        this._UserName = v;
    }
}



import { Component }from '@angular/core';
import { LoginInformation } from './loginInformation.service';

@Component()
export class YourApp {
   constructor(_loginInformation: LoginInformation){

   }

}

answered Sep 5, 2016 at 8:04

Sam Vloeberghs

9225 gold badges18 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular2 / Ionic2 / TypeScript "two way" binding not updated if i use as reference in async function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related