如果我在异步函数中用作引用，则不会更新Angular2 / Ionic2 / TypeScript“双向”绑定

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 (eg 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?

Answer 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);
    }
);

Answer 2

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){

   }

}