Angular2，在settimeout中变量更改后查看不更新 [英] Angular2, view not updating after variable changes in settimeout
问题描述
我正在尝试将我的第一个angular2应用程序设置为实验并使用最新的beta版本。
我正面临着一个奇怪的问题我使用的变量在我的视图中，在设置超时后没有更新。
@Component（{
选择器：my-app，
绑定：[]
}）
@View（{
templateUrl：templates / main.component.html ，
styleUrls：['styles / out / components / main.component.css']
}）
导出类MainComponent {
public test2 =初始文本;
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 =viewportcontent =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.csstype =text / css =stylesheet/>
< script>
System.config（{
map：{
rxjs：'/ node_modules / rxjs'//添加此地图部分
}，
包：{'scripts / out'：{defaultExtension：'js'}，'rxjs'：{defaultExtension：'js'}}
}）;
System.import（'scripts / out / main'）;
< / script>
< / head>
< body>
< my-app> loading ...< / my-app>
< / body>
< / html>
带引导程序的main.ts：
从'angular2 / core'导入{Component};
导入{bootstrap}来自'angular2 / platform / browser'
import {COMMON_DIRECTIVES}来自'./constants';
从'./components/main.component'导入{MainComponent}
bootstrap（MainComponent）;
main-component.html
{{test2}}
正如Vlado所说，它应该有效; - ）
我认为 angular2-polyfills.js 库应该包含在您的页面中。我看不出来。该文件本质上是zone.js和reflect-metadata的混搭。区域参与了更新的检测。
你可以看看这个视频，其中Bryan Ford解释了它是什么： https://www.youtube.com/watch?v=3IqtmUscE_U 。
<希望它可以帮助你，
Thierry
I am trying to setup my first angular2 application as an experiment and am using the latest beta release.
I am facing a weird issue where the variable i am using in my view is not being updated after setting a timeout.
@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);
}
}
As you can see i have a variable named test2 and in the constructor i set a timeout of 500 ms where i am updating the value to "updated text".
Then in my view main.component.html i simply use:
{{ test2 }}
But the value will never be set to "updated text" and stays on "initial text" forever even though the update part is being hit. If i follow the angular2 tutorial they dont really give me an answer to this solution. Was wondering if anyone would have an idea of what i am missing here.
edit: my full code i am using including the bootstrap and html etc
<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 with the 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);
main-component.html
{{ test2 }}
As Vlado said, it should work ;-)
I think that the angular2-polyfills.js library should be included into your page. I can't see it. This file is essentially a mashup of zone.js and reflect-metadata. Zones take part of the detection of updates.
You could have a look at this video where Bryan Ford explains what it is: https://www.youtube.com/watch?v=3IqtmUscE_U.
Hope it helps you, Thierry
这篇关于Angular2，在settimeout中变量更改后查看不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
