可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am trying to setup my first angular2 application as an experiment and am using the latest beta release.

I am facing a weird issue where the variable i am using in my view is not being updated after setting a timeout.

@Component({
    selector: "my-app",
    bindings: []
})

@View({
    templateUrl: "templates/main.component.html",
    styleUrls: ['styles/out/components/main.component.css']
})

export class MainComponent {

    public test2 = "initial text";

    constructor() {
        setTimeout(() => {
            this.test2 = "updated text"; 
        }, 500);

    }
}

As you can see i have a variable named test2 and in the constructor i set a timeout of 500 ms where i am updating the value to "updated text".

Then in my view main.component.html i simply use:

{{ test2 }}

But the value will never be set to "updated text" and stays on "initial text" forever even though the update part is being hit. If i follow the angular2 tutorial they dont really give me an answer to this solution. Was wondering if anyone would have an idea of what i am missing here.

edit: my full code i am using including the bootstrap and html etc

<html>
<head>
    <title>Angular 2</title>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/node_modules/reflect-metadata/reflect.js"></script>
    <script src="/node_modules/angular2/bundles/angular2.dev.js"></script>

    <script src="/node_modules/q/q.js"></script>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="/bower_components/breeze-client/breeze.debug.js"></script>
    <script src="/bower_components/datajs/datajs.js"></script>
    <script src="/bower_components/bootstrap-less/js/collapse.js"></script>
    <script src="/bower_components/bootstrap-less/js/modal.js"></script>

    <script src="/bower_components/signalr/jquery.signalR.js"></script>
    <script src="http://localhost:64371/signalr/js"></script>

    <link href="styles/out/main.css" type="text/css" rel="stylesheet"  />
    <script>
        System.config({
            map: {
                rxjs: '/node_modules/rxjs' // added this map section
            },
            packages: {'scripts/out': {defaultExtension: 'js'}, 'rxjs': {defaultExtension: 'js'}}
        });

        System.import('scripts/out/main');

    </script>
</head>
<body>
    <my-app>loading...</my-app>
</body>
</html>

main.ts with the bootstrap:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser'
import {COMMON_DIRECTIVES} from './constants';
import {MainComponent} from './components/main.component'
bootstrap(MainComponent);

main-component.html

{{ test2 }}

回答1:

As Vlado said, it should work ;-)

I think that the angular2-polyfills.js library should be included into your page. I can't see it. This file is essentially a mashup of zone.js and reflect-metadata. Zones take part of the detection of updates.

You could have a look at this video where Bryan Ford explains what it is: https://www.youtube.com/watch?v=3IqtmUscE_U.

Hope it helps you, Thierry

回答2:

That should work. Do you have any other errors in console?

@Component({
 selector: 'my-app',
 template: `<h1>Hello {{title}}</h1>`
})
export class App {
 public title: string = "World";
 constructor() {
   setTimeout(() => {
    this.title = "Brave New World"
   }, 1000);)
 }
}

Look at this Plunker: http://plnkr.co/edit/XaL4GoqFd9aisOYIhuXq?p=preview

回答3:

I had a very similar problem to the OP where even in a basic Angular2 setup changes to bound properties would not be reflected by the view automatically. At this point in time we're using Angular2 2.0.0-rc.6. There was no error message.

In the end I found the culprit to be a reference to es6-promise.js, which was 'required' by a third party component we use. Somehow this interfered with the core-js reference we are using which is suggested with rc6 in some of the Angular2 tutorials.

As soon as I got rid of the es6-promise.js reference, the view updated correctly after changing a property on my component (via Promise or timeout).

Hope this helps somebody some day.

回答4:

In Angular2 (~2.1.2) another way to make it work is through the ChangeDetectorRef class. The original question code would look like this:

import { 
  ChangeDetectorRef
  // ... other imports here
} from '@angular/core';

 @Component({
    selector: "my-app",
    bindings: []
})

@View({
    templateUrl: "templates/main.component.html",
    styleUrls: ['styles/out/components/main.component.css']
})

export class MainComponent {

    public test2 = "initial text";

    constructor(private cd: ChangeDetectorRef) {
        setTimeout(() => {
            this.test2 = "updated text"; 

            // as stated by the angular team: the following is required, otherwise the view will not be updated
            this.cd.markForCheck();

        }, 500);
    }
}