I’m attempting to use a native plugin for the first time, the BLE plugin, and when I use the BLE.startScanWithOptions(…) method, my Angular UI doesn’t update with data generated within the code which executes each time a new device is reported.
For example, I’ve taken the basic tabs project and added the BLE plugin. In the example as written, myvariable will not be updated in the UI in realtime, but with adding zone.run() will cause it to update in realtime.
What am I missing that then requires the hack with zone.run() ?
home.html
<h2>Welcome to Ionic! {{myvariable}}</h2>
home.ts
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { BLE } from '@ionic-native/ble';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
myvariable: number = 0;
constructor(public navCtrl: NavController, public ble: BLE, platform: Platform) {
platform.ready().then(() => {
// start scanning
this.ble.enable().then(
() => {
this.ble.startScanWithOptions([], {reportDuplicates: true}).subscribe(device => {
// this will not update the UI
this.myvariable++;
// this will work.
//this._zone.run(() => this.myvariable++);
});
}).catch(() => {});
});
}
}
ionic info
global packages:
@ionic/cli-utils : 1.2.0
Cordova CLI : 7.0.1
Ionic CLI : 3.2.0
local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-cordova : 1.2.1
@ionic/cli-plugin-ionic-angular : 1.2.0
Cordova Platforms : none
Ionic Framework : ionic-angular 3.3.0
System:
Node : v6.10.3
OS : Windows 10
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed