cordova app angular 2 member variable update not u

2019-09-11 05:06发布

问题:

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.

that member variable is referenced in the @component template as per the getting started tutorials.

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.

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?

回答1:

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 ***/
       });
     });     
   }