jens strümper jens strümper - 1 year ago 326
Javascript Question

Ionic 2 - Changes to Model are not updated in the view / UI

I have a hard time understanding how I can propagate changes to a property within a component to the actual view without triggering an event from the UI. If I go back and forth the UI is updated.

This is my component which retrieves a BLE notify every second. The result value of the notify needs to be updated in the view after each notify. I can see the notifies showing up in the developer console.

import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output} from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { BLE } from 'ionic-native';
import {Observable} from 'rxjs/Observable';

templateUrl: 'build/pages/devices/devices.html',
//changeDetection: ChangeDetectionStrategy.OnPush

export class DevicePage {

private nav:NavController = null;
private navParams:NavParams = null;
private device:any;
private connecting:any;
private characteristics:any;
private data:any;
private temp:any;

static get parameters() {
return [[NavParams],[NavController]];
constructor(navParams, nav, private cd:ChangeDetectorRef ) {
this.nav = nav;
this.navParams = navParams;
this.device = this.navParams.get('device');

connect(device) {
var service = "6e524635-312d-444b-2020-202020202020";
var characteristic_read = "6e524635-312d-444b-2062-7574746f6e20";
var characteristic_write = "6e400002-b5a3-f393-e0a9-e50e24dcca9e"
var bleUART = "6e400001-b5a3-f393-e0a9-e50e24dcca9e";
var RXD = "6e400003-b5a3-f393-e0a9-e50e24dcca9e";
var TXD = "6e400002-b5a3-f393-e0a9-e50e24dcca9e";
//this.hello = "Hello";
peripheralData => {
console.log("Connect:" + JSON.stringify(peripheralData));
BLE.startNotification(device, bleUART, RXD).subscribe(
buffer => {this.temp = String.fromCharCode.apply(null, new Uint8Array(buffer));
console.log("Data: " + this.temp);
error => {console.log("Error Notification" + JSON.stringify(error));
error => {console.log("Error Connecting" + JSON.stringify(error));})

The corresponding HTML:

Hotplate Status

<h2>Connected Device:</h2>


Added Root Page to show from where
is called

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DevicePage } from '../devices/devices';
import { BLE } from 'ionic-native';

@Component({templateUrl: 'build/pages/home/home.html'})

export class HomePage {
private nav:NavController = null; // please add this line as default generated page plus the --ts option on command line.
private devices:any;
private isScanning:any;

static get parameters() {
return [[NavController]];

constructor(nav:NavController) {
this.nav = nav;
this.devices = [];
this.isScanning = false;

startScanning() {
console.log('Scanning Started');
this.devices = [];
this.isScanning = true;
BLE.startScan([]).subscribe(device => {

setTimeout(() => {
BLE.stopScan().then(() => {
console.log('Scanning has stopped');
this.isScanning = false;
}, 5000);

connectToDevice(device) {
console.log('Connect To Device');
this.nav.push(DevicePage, {
device: device

and the corresponding HTML:

<ion-navbar *navbar>
<ion-buttons end>
<button (click) = "startScanning()">Scan</button>

<ion-list insert>
<ion-item-sliding *ngFor="#device of devices" #slidingItem>
<button ion-item (click)="connectToDevice(device)">
<ion-spinner *ngIf="isScanning==true" name="circles"></ion-spinner>

I've tried to experiment with change detection but
results in an exception. Similar TypeError is shown when I use NgZone directly.

Uncaught TypeError: Cannot read property 'markForCheck' of undefined(anonymous function) @ app.bundle.js:84SafeSubscriber.__tryOrUnsub @ @ app.bundle.js:94384Subscriber._next @ @ app.bundle.js:94298cordova.callbackFromNative @ cordova.js:293processMessage @ cordova.js:1081processMessages @ cordova.js:1104pollOnce @ cordova.js:973pollOnceFromOnlineEvent @ cordova.js:960

I'm using the latest Ionic2 Beta.
Any idea what I am doing wrong here?


Answer Source

You need to add ChangeDetectorRef to params

 return [[NavParams],[NavController],[ChangeDetectorRef]];
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download