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();

Answer 1

Waitting for answers