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>&nbsp;&nbsp;{{signinMessage}}<br >
    <button id='test' (click)='onTestClick()'>test</button>&nbsp;&nbsp;{{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屋！