我正在尝试将我的第一个 angular2 应用程序设置为实验,并且正在使用最新的 beta 版本。
我面临一个奇怪的问题,我在我的视图中使用的变量在设置超时后没有更新。
@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 教程,他们并没有真正给我这个解决方案的答案。想知道是否有人会知道我在这里缺少什么。
编辑:我正在使用的完整代码,包括引导程序和 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);
主要组件.html
{{ test2 }}