Angular 2: when i change a variable in a promise.than in ngOnInit the view doesn't refresh

Question

I created a short example of an Angular 2 application built with NativeScript, what I expect is the variable foo to be "foo" at the beginning, then the ngOnInit() first change it to "bar" and then the promise return and I should see "foobar" in the Label, but instead I see "bar".

The execution is as expected as I can see in the logs:

JS: afterBar
JS: promise new
JS: promise than

component.ts

foo:String="foo";

ngOnInit() {
    this.foo = "bar";
    console.log("afterBar");

    var promise = new Promise((resolve)=>{
        resolve(42);
        console.log("promise new");
    });

    promise.then(x=> {
        this.foo="foobar";
        console.log("promise than");
    });
}

The app view:

<Label [text]='foo'></Label>

how can I change the Label text in a promise an see it "refreshing" into the app view?

SOLVED:

I solved the problem by forcing an update

import { ChangeDetectorRef } from '@angular/core';
    [...]
constructor(
    [...],
    private ref: ChangeDetectorRef) {       
}

[...]
this.ref.detectChanges();

That's the app components view according to your question. Please post the code of the label component. — Günter Zöchbauer, Aug 29 '16 at 09:49
try using import `{NgZone} from "@angular/core";` `constructor(private _ngZone: NgZone){}` `this._ngZone.run(() => { this.foo="foobar"; });` — Habib Kazemi, Aug 29 '16 at 09:55
there is no code for the label component. i declared a variable and i used the angular binding `[text]='foo'` to print the string in the view — Andrea Veronesi, Aug 29 '16 at 09:55
@HabibKazemi this is the code but is not working `promise.then(x=> { this.foo="foobar"; this._ngZone.run(() => { this.foo="xxxxx"; }); console.log("promise than"); }); ` — Andrea Veronesi, Aug 29 '16 at 09:59
For me `` (plain HTML without any Angular) also doesn't show anything in the browser, therefore it's expected that `` doesn't. See @Thyagu's answer. — Günter Zöchbauer, Aug 29 '16 at 10:03
@GünterZöchbauer are you using a mobile app with NativeScript? because a NativeScript label is not an HTML label — Andrea Veronesi, Aug 29 '16 at 10:08

Angular 2: when i change a variable in a promise.than in ngOnInit the view doesn't refresh

0 Answers0

Linked