UI components doesn't update with bluetooth serial subscribe data

Ionic Native
1

Hi,

I’m new to Ionic (My version 3.6.0) . I have two gauges (ng-canvas-gauges) configured and working. For test purpose one of them is binded to data coming from blutetooth (Bluetoothserial Ionic Native plugin) and the other to a random value generated after clicking a button (ion-button). The last one is updated everytime the button is clicked but the first one is not updated (some cases only one time after several seconds). I’m guessing maybe my issue is related due subscribe method is an async task and I have to tell Ionic when to update the UI components. Is it correct?

Here part of my ts serial code:


  ionViewDidLoad() {
    console.log('ionViewDidLoad MonitorPage');   
 this.BTData();
  }

 BTData(){

    var Buffer = new Uint8Array(255);
    var i = 0;

    this.BTSerial.subscribeRawData().subscribe ((data) => {

      var x = 0;
      var Bytes = new Uint8Array(data);

      for (x; x < Bytes.length; x++)
      {
        Buffer[i+x]=Bytes[x];       
      }

      i += Bytes.length;

      if (i > 2 && Buffer[0] != 85 && Buffer[1] != 170)
      {
        this.BTSerial.clear();
        i = 0;
      }

      if (i >= 51 && Buffer[0] == 85 && Buffer[1] == 170)
      {
        console.log("OK " + " Encabezado: " + Buffer[0]+" "+Buffer[1]);        
        i = 0;      
        this.valVFRS = Buffer[3];
      }       
    });            
  }

  testG(){
  this.valFST = Math.random () * 255;
}

Html Gauges code:

<radial-gauge [attr.value] = "valVFRS">
</radial-gauge>

<radial-gauge [attr.value] = "valVFST">
</radial-gauge>

<button ion-button (click)="testG()">Test Gauge 2</button>

Despite Gauge 1 is not updated, the console does, showing every second (The bluetooth device transmit rate) that serial data arrived.

Any guidance for this?

Thank you.

2

Solved using NgZone and adding the following to BTData():

var myZone = new NgZone ({});

myZone.run (() => {
   this.valVFRS = Buffer[3];
)};
1 Like