Page wont refresh in Ionic

[pvCloud]

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.

Thanks!

---

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

      let  ble = this['ble'];
      
      this.setMessage("SCAN: BLE ENABLE!");
      ble.enable();
      
      this.setMessage("SCAN: Setting Interval...");
      this['intervalHandle'] = setInterval(() => { // SET AN INTERVAL THAT RUNS EVERY 3 Seconds
        this.setMessage("INTERVAL: BLE SCAN...");
        //https://ionicframework.com/docs/native/ble/ 
        ble.scan([], 2 /*seconds (0) */).subscribe( data => { //DO SCAN DURING 1 SECOND
          this.setMessage("SCAN SUBSCRIBER: " + data['id'] + ' | ' + data['name'] + ' | ' + data['rssi']);
          if(data['name']=="Blynk"){
            this.setMessage("SCAN SUBSCRIBER: BLYNK FOUND! STOPPED SCANNING!");
            clearInterval(this["intervalHandle"]);
            this["targetDevice"] = data;
            this["ComandoTXT"] = "CAMBIAR LED";
          }
        });
      },2100);//END OF INTERVAL DEFINITION
    }

[Sujan12]

So

@pvCloud

this.setMessage

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!"?

[pvCloud]

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

[Sujan12]

@pvCloud

messages added to the collection

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
[/quote]

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

[pvCloud]

So, the full code can be accessed here:

• https://github.com/janunezc/robotics/blob/master/ionictests/myapp/src/pages/led/led.ts
• https://github.com/janunezc/robotics/blob/master/ionictests/myapp/src/pages/led/led.html

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.

• https://github.com/janunezc/robotics/blob/master/ionictests/myapp/src/pages/scan/scan.html
• https://github.com/janunezc/robotics/blob/master/ionictests/myapp/src/pages/scan/scan.ts

[Sujan12]

What does this do?

            let idx = 0;
            while(idx<10000){
              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.

[pvCloud]

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.

[PurpleEdge]

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.

Results from BLE Scan Not Invoking Angular Update

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 require…

Page does not update after BLE scan

Hello, I’m having trouble showing two beacons BLE credentials within an array. If I capture the beacons credentials in a string var they display one after the other. If I try to push the credentials into an array and ngFor diplay them, they do not show. This code updates the screen: data: string; scanBLE() { this.services = this.ble.scan([], 20); this.services.subscribe( data => { this.data = JSON.stringify(data); this.applicationRef.tick(); }, …

[AaronSterling]

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);

[pvCloud]

Here is the definitive answer to this question…

How to $apply and $digest in Angular 4 and IONIC 3?

[AaronSterling]

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