javascript - Angular2, visning oppdateres ikke etter at variabelen endres i settimeout

Jeg prøver å sette opp min første Angular2-applikasjon som et eksperiment og bruker den nyeste beta-versjonen.

Jeg står overfor et merkelig problem der variabelen jeg bruker i visningen min ikke blir oppdatert etter å ha satt en tidsavbrudd.

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

    }
}

Som du kan se har jeg en variabel kalt test2, og i konstruktøren setter jeg en timeout på 500 ms hvor jeg oppdaterer verdien til "oppdatert tekst".

Så i mitt synspunkt bruker jeg ganske enkelt main.component.html:

{{ test2 }}

Men verdien vil aldri bli satt til "oppdatert tekst" og forblir på "starttekst" for alltid, selv om oppdateringsdelen blir nådd. Hvis jeg følger Angular2-opplæringen, gir de meg egentlig ikke et svar på denne løsningen. Jeg lurte på om noen hadde en idé om hva jeg går glipp av her.

rediger: min komplette kode jeg bruker inkludert Bootstrap og HTML osv.

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

hoved-komponent.html

{{ test2 }}

Svar #1

Som Vlado sa, det bør fungere ;-)

Jeg tror at angular2-polyfills.js-biblioteket bør inkluderes på siden din. Jeg kan ikke se det. Denne filen er i hovedsak en blanding av zone.js og reflect-metadata. Zones tar del i oppdagelsen av oppdateringer.

Du kan ta en titt på denne videoen hvor Bryan Ford forklarer hva det er: https://www.youtube.com/watch?v=3IqtmUscE_U.

Håper det hjelper deg, Thierry

Svar #2

Det bør fungere. Har du noen andre feil i konsollen?

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

Se på denne Plunker: http://plnkr.co/edit/XaL4GoqFd9aisOYIhuXq?p=preview

Relaterte artikler