Page wont refresh in Ionic


I am trying to run a ble scan operation and stop that scan when some particular device is found.

I tried the code below, but the screen/view doesn’t update/refresh when the device is found. When I touch a button in the screen or a tab, then it refreshes.

I was looking for how to implement $apply() in ionic3 with typescript, but i did not found much.


  public findBlynk(){
      this.setMessage("SCAN: Begin!");
      this['ComandoTXT'] = "Scanning...";

      let  ble = this['ble'];
      this.setMessage("SCAN: BLE ENABLE!");
      this.setMessage("SCAN: Setting Interval...");
      this['intervalHandle'] = setInterval(() => { // SET AN INTERVAL THAT RUNS EVERY 3 Seconds
        this.setMessage("INTERVAL: BLE SCAN...");
        ble.scan([], 2 /*seconds (0) */).subscribe( data => { //DO SCAN DURING 1 SECOND
          this.setMessage("SCAN SUBSCRIBER: " + data['id'] + ' | ' + data['name'] + ' | ' + data['rssi']);
            this["targetDevice"] = data;
            this["ComandoTXT"] = "CAMBIAR LED";


works all the time and updates the interface (I assume it sets a variable that is bound in the UI?) but only not in the case of "SCAN SUBSCRIBER: BLYNK FOUND! STOPPED SCANNING!"?


It works all the time, but keeps some lag between messages added to the collection and messages displayed in the view.

It gets up to date as soon as the User interacts with the UI, like taping a tab or a button


What collection?[quote=“pvCloud, post:3, topic:97100”]
It gets up to date as soon as the User interacts with the UI, like taping a tab or a button

So it does not update automatically for all messages, only if you interact with the UI?


So, the full code can be accessed here:

These two make an bluetooth scan searching for a device named “Blynk” and when the device is found it is supposed to change the appareance of a button. It reports what’s going on in a set of messages (that is

When it completes the process and actually finds the device, it requires an interaction from the user with the UI to update to the button and the latest set of messages (what I called “the collection” earlier)

These other two files do something a bit different. They just permanently do bluetooth scan for devices in the air and report them out in another array of messages. They seem to be refreshing from time to time, but seem to stay somewhat behind of the latest messages.


What does this do?

            let idx = 0;
              this["test"] = idx;
              idx ++;

In general I would advise you to simplify your code a bit. Get rid of everything overly complicated. (e.g. all this['myCount'] = 0; can be this.myCount = 0;, add console.log everywhere interesting things happen. Then use remote debugging to see when you get the messages in the console and compare with the UI.


Yeah… please ignore that piece of code… it was a failed intent to force massive changes to the viewmodel that could force the UI to refresh… but it doesnt do anything of value. I just removed it but still doesnt refresh properly.


I believe native ble is broken and the screen doesn’t update from any variables within observables, even though they are obviously available as seen with console.log(this.variable)

Search for other recent posts on the problem (“ble” will find them), there are at least two workarounds.

1 Like

Use a getter so you are in the template’s zone. For exampe, this solves the first question you linked to.

{{numberOfConnections | async}}

numConnect: number = 0;
get numberOfConnections(): Observable<number> {
   return this.ble.startScanWithOptions([], {reportDuplicates: true})
              .map(device => ++this.numConnect);

Here is the definitive answer to this question…


That’s an expensive operation. Using Obsevables will provide leaner code.