Jur*_*hen 21 javascript typescript angular2-template angular
我正在尝试将我的第一个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教程,他们真的没有给我这个解决方案的答案.想知道是否有人会知道我在这里缺少什么.
编辑:我正在使用的完整代码包括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 }}
正如Vlado所说,它应该工作;-)
我认为angular2-polyfills.js图书馆应该包含在你的页面中.我看不出来.该文件本质上是zone.js和reflect-metadata的混搭.区域参与更新检测.
您可以看看这个视频,其中Bryan Ford解释了它是什么:https://www.youtube.com/watch？v = 3IqtmUscE_U.
希望它对你有帮助,蒂埃里
这应该工作.你在控制台有任何其他错误吗？
@Component({
selector: 'my-app',
template: `<h1>Hello {{title}}</h1>`
})
export class App {
public title: string = "World";
constructor() {
setTimeout(() => {
this.title = "Brave New World"
}, 1000);)
}
}
看看这个Plunker:http://plnkr.co/edit/XaL4GoqFd9aisOYIhuXq?p=preview
| 归档时间： |
|
| 查看次数： |
24931 次 |
| 最近记录： |