Angular2，在settimeout变量更改后视图不更新 [英] Angular2, view not updating after variable changes in settimeout
问题描述
我正在尝试设置我的第一个 angular2 应用程序作为实验，并且正在使用最新的测试版.
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);
}
}
如您所见，我有一个名为 test2 的变量，在构造函数中我将超时设置为 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".
然后在我看来 main.component.html 我只是使用:
Then in my view main.component.html i simply use:
{{ test2 }}
但该值永远不会被设置为更新文本"，并且永远停留在初始文本"上，即使更新部分被点击.如果我遵循 angular2 教程，他们并没有真正给我这个解决方案的答案.想知道是否有人会知道我在这里缺少什么.
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.
我正在使用的完整代码，包括引导程序和 html 等
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:
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);
主组件.html
{{ test2 }}
推荐答案
正如 Vlado 所说，它应该可以工作 ;-)
As Vlado said, it should work ;-)
我认为 angular2-polyfills.js 库应该包含在您的页面中.我看不到.这个文件本质上是 zone.js 和反射元数据的混搭.区域参与检测更新.
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.
你可以看看这个视频，布莱恩福特解释了它是什么:https://www.youtube.com/watch?v=3IqtmUscE_U.
You could have a look at this video where Bryan Ford explains what it is: https://www.youtube.com/watch?v=3IqtmUscE_U.
希望对你有帮助蒂埃里
这篇关于Angular2，在settimeout变量更改后视图不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
