Angular2, просмотр не обновляется после изменения переменной в настройке

Я пытаюсь настроить мое первое приложение angular2 в качестве эксперимента и использую последнюю бета-версию.

Я столкнулся с странной проблемой, когда переменная, которую я использую в своем представлении, не обновляется после установки тайм-аута.

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

    }
}

Как вы можете видеть, у меня есть переменная с именем test2, а в конструкторе я устанавливаю тайм-аут в 500 мс, где я обновляю значение до "обновленного текста".

Тогда, на мой взгляд, main.component.html я просто использую:

{{ test2 }}

Но значение никогда не будет установлено на "обновленный текст" и останется на "начальном тексте" навсегда, даже если часть обновления будет удалена. Если я следую учебнику angular2, они не дают мне ответа на это решение. Было интересно, есть ли у кого-нибудь представление о том, чего я здесь не вижу.

edit: мой полный код, который я использую, включая bootstrap и html и т.д.

<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 с загрузкой:

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

Основной-component.html

{{ test2 }}

Ответы

Ответ 1

Как сказал Владо, он должен работать; -)

Я думаю, что библиотека angular2-polyfills.js должна быть включена в вашу страницу. Я не вижу этого. Этот файл по существу представляет собой mashup of zone.js и метаданные отражения. Зоны принимают участие в обнаружении обновлений.

Вы можете посмотреть это видео, где Брайан Форд объясняет, что это такое: https://www.youtube.com/watch?v=3IqtmUscE_U.

Надеюсь, это поможет вам, Thierry

Ответ 2

Это должно сработать. У вас есть другие ошибки в консоли?

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

Посмотрите на этого плунжера: http://plnkr.co/edit/XaL4GoqFd9aisOYIhuXq?p=preview

Ответ 3

У меня была очень похожая проблема с OP, где даже в базовых настройках Angular2 изменения связанных свойств не отражались бы автоматически. На данный момент мы используем Angular2 2.0.0-rc.6. Не было сообщений об ошибке.

В конце концов я обнаружил, что виновником является ссылка на es6-prom.js, которая была "обязательной" сторонним компонентом, который мы используем. Каким-то образом это мешало использованию ссылки core-js, которую мы используем, которая предлагается с помощью rc6 в некоторых учебниках Angular2.

Как только я избавился от ссылки es6-prom.js, представление обновилось правильно после изменения свойства на моем компоненте (через Promise или timeout).

Надеюсь, это когда-нибудь поможет кому-то.

Ответ 4

В Angular2 (~ 2.1.2) другой способ заставить его работать через класс ChangeDetectorRef. Оригинальный код вопроса будет выглядеть так:

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