Changes to Property are not updated in the view

Ionic Framework ionic-v3
1

Hi,
I have a hard time understanding how I can propagate changes to a property within my class to the actual view without triggering an event from the view. If I go back and forth the view 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 popping in 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';


@Component({
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');
  this.connect(this.device.id);
}

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";
  BLE.connect(device).subscribe(
    peripheralData => {
      console.log("Connect:" + JSON.stringify(peripheralData));
        BLE.startNotification(device, bleUART, RXD).subscribe(
          buffer => {this.temp = String.fromCharCode.apply(null, new Uint8Array(buffer));
            this.cd.markForCheck();
            console.log("Data: " + this.temp);
            },
          error => {console.log("Error Notification" + JSON.stringify(error));
      })},
      error => {console.log("Error Connecting" + JSON.stringify(error));})
  }
}

The corresponding HTML:

<ion-header>
<ion-navbar>
  <ion-title>
    Hotplate Status
  </ion-title>
</ion-navbar>
</ion-header>

<ion-content>
  <h2>Connected Device:</h2>
  <p>{{device.name}}</p>
  <h1>Temperature:</h1>
  <p>{{temp}}</p>

</ion-content>

I’ve tried to experiment with change detection but markForCheck()results in an exception.

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

Any idea what I am doing wrong here?

Thanks,
Jens