UI TextView is not updated correctly on Android


#1

Hello everybody,
i’m learning the basics of nativescript, i set up a small example using nativescript + typescript+angular. The code implements a simple registration to the Google cloud service. After clicking on the register button, I correctly receive the token and the UI successfully shows the alert “device registration successfully” followed by the token. The problem is that i also want (for testing purposes) to show the same token in the TextView declared inside the template. This TextView remains empty and i need to click on the register button a second time to see something inside it. It sounds like a refresh problem, any hint?

PS: i’m testing on an android emulator

thanks in advance.

app.component.ts

import { Component } from "@angular/core";
import * as pushPlugin from "nativescript-push-notifications";
var Observable = require("data/observable");
@Component({
selector: "my-app",
template: `

<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>    
<StackLayout (loaded)="pageLoaded()">>
<Label text="Tap the button to trigger the register function." textWrap="true" class=""></Label>
<Button text="REGISTER" (tap)="registerTap()" ></Button>    
<label text="Your device id/token:" textWrap="true" ></label>
<TextView [(ngModel)]="this.viewModel.registrationId" class="title" textWrap="true"></TextView>
<Label text="{{ message }}" class="message" textWrap="true" ></Label>
</StackLayout>    
`
})
 export class AppComponent {

 viewModel = new Observable.Observable({
 registrationId: ""
 });

 pageLoaded() {   }

 registerTap () {

    let settings = {
    // Android settings 
    senderID: '6XXXXXXXXXX', // Android: Required setting with the sender/project number 
    notificationCallbackAndroid: message => { // Android: Callback to invoke when a new push is  received. 
                
       
    },

    // iOS settings 
    badge: true, // Enable setting badge through Push Notification 
    sound: true, // Enable playing a sound 
    alert: true, // Enable creating a alert 

    // Callback to invoke, when a push is received on iOS 
    notificationCallbackIOS: message => {
        //alert(JSON.stringify(message));
    }
   };        
   pushPlugin.register(settings,
    // Success callback 

    token => {
       // if we're on android device we have the onMessageReceived function to subscribe 
        // for push notifications 
        if(pushPlugin.onMessageReceived) {
          
            pushPlugin.onMessageReceived(settings.notificationCallbackAndroid);
    
        }

       
       this.viewModel.set("registrationId", token);     
        alert('Device registered successfully : '+ this.viewModel.registrationId); 
    },    
    // Error Callback      
    error =>{            
        console.log(error);           
    }     
);
}
}

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule }    from '@angular/material';

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { AppComponent } from "./app.component";

@NgModule({

imports: [
NativeScriptModule,
MdToolbarModule,
NativeScriptFormsModule,
],

declarations: [AppComponent],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA],
})

export class AppModule {}

main.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";

platformNativeScriptDynamic().bootstrapModule(AppModule);