cordova app angular 2 成员变量更新不更新对它的模板引用 [英] cordova app angular 2 member variable update not updating template reference to it
问题描述
我有一个简单的cordova app angular 2测试,其中@Component装饰的AppComponent类成员变量在按钮单击方法启动时更新,稍后当我进入它调用的启用promise的方法的回调时.
i have a simple cordova app angular 2 test where @Component decorated AppComponent class member variable is updated when button click method starts and later when i land in callback for promise enabled method it calls.
根据入门教程,在@component 模板中引用了该成员变量.
that member variable is referenced in the @component template as per the getting started tutorials.
我发现当我在涟漪模拟器 [/chrome] 中调试/测试这个时,第一个成员变量更新在视图模板中呈现,但第二个没有.相反,当我在 android 模拟器、windows mobile/uwp 模拟器和 windows x64/uwp 应用程序中调试/测试它时,第一个成员变量更新不会在视图模板中呈现,但第二个会.
what i'm finding is that when i debug/test this in ripple emulator [ / chrome ] the first member variable update gets rendered in view template but the 2nd one doesn't. Conversely when i debug/test this in android emulator, windows mobile / uwp emulator and windows x64 / uwp app the first member variable update doesn't get rendered in view template but the 2nd one does.
在调试器控制台中,我确认模板中引用的成员变量更新实际上已显示.
in the debugger console i am confirming that the member variable updates referenced in template are in fact showing up.
可以使用 https://github.com/myusrn/acu6withng2 重现此内容 |测试按钮处理,并使用当前的 ng2.0.0-beta.8 进行重现.
can repro this using https://github.com/myusrn/acu6withng2 | test button processing and it repros with current ng2.0.0-beta.8 in place.
这是我认为与该存储库中的来源最相关的摘录.
here is excerpt i would think is most relevant from the sources in that repo.
@Component({
selector: 'my-app',
//template: '<h1>Welcome page for {{message}}</h1>',
template: `
<button id='signin' (click)='onSignInClick()'>sign-in</button> {{signinMessage}}<br >
<button id='test' (click)='onTestClick()'>test</button> {{testMessage}}`,
//providers: [<list of dependency injection providers you want to override or set at this component scope>]
})
export class AppComponent {
//message: string;
signinMessage = '';
testMessage = '';
// onSignInClick() { // repros whether i define as method
onSignInClick = () => { // and when defined as member function
this.signinMessage = 'starting signin . . .'; /*** problem area ***/
this.authService.getAccessToken().then(accessToken => {
this.signinMessage = 'success'; /*** problem area ***/
});
// onTestClick() { // repros whether i define as method
onTestClick = () => { // and when defined as member function
this.testMessage = 'starting test . . .'; /*** problem area ***/
this.ping().then(result => {
this.testMessage = 'success'; /*** problem area ***/
});
}
这听起来与可能出现的已知问题有关吗?
does this sound like anything to do with a known issue that can arise that has a known work around?
推荐答案
有关更多详细信息,请参阅触发Angular2 手动变化检测
For more details see Triggering Angular2 change detection manually
constructor(private zone:NgZone);
onSignInClick = () => { // and when defined as member function
this.signinMessage = 'starting signin . . .'; /*** problem area ***/
this.authService.getAccessToken().then(accessToken => {
zone.run(() => {
this.signinMessage = 'success';
});
});
// onTestClick() { // repros whether i define as method
onTestClick = () => { // and when defined as member function
this.testMessage = 'starting test . . .'; /*** problem area ***/
this.ping().then(result => {
zone.run(() => {
this.testMessage = 'success'; /*** problem area ***/
});
});
}
这篇关于cordova app angular 2 成员变量更新不更新对它的模板引用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!