Я пытаюсь настроить мое первое приложение 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 }}