Accessing variable outside this.ngZone

Ionic Framework Ionic Angular
1

Hi all,

I am a circuit designer, in need of a quick app. i thought javascript was a piece of a cake so off I went with Ionic.
Now I am in a loop hole that I have no clue of.

This is a piece of a code I got from the web that subscribes my app to a ble service.

startBleNotificationsOnPotentioChar()
  {
    if(isLogEnabled) console.log('starting BLE Notifications on the potentio characteristic.');        
    this.ble.startNotification(this.connectedDevice.id, CUSTOM_SERVICE_UUID, POTENTIO_LEVEL_CHAR_UUID).subscribe(
      buffer => {           
      var data = new Uint8Array(buffer[0]); 
      
      //if(isLogEnabled) console.log('data received in the potentio characteristic : '+data.length);
  
      this.ngZone.run(() => { 
        this.potentioLevel = data[0];
        this.packetCounter++;
        if (this.packetCounter<4){
          this.plotArray.push(data);
        }
        
        this.storageArray.push(data);
        });
      },
      error => { if(isLogEnabled) console.error('Error starting notifications on the potentio characteristic.', error);}
    );
  }

I have a page class defined like this

export class DashboardPage  {

  connectedDevice : any = {}; 

  button1State : number = 0;
  button2State : number = 0;
  button3State : number = 0;
  button4State : number = 0;

  led3IsOn : boolean = false;
  led4IsOn : boolean = false;

  potentioLevel : number = 0;
  batteryLevel : number = 0;

  plotArray: Uint8Array[] = [];
  storageArray: Uint8Array[] = [];
  plotCounter : number = 0;
  packetCounter : number = 0;
........

  plotSimpleBarChart() {
    let packetCounter: number = 0;
    let plotCounter: number = 0;
    
    let myChart = HighCharts.chart('highcharts', {
      chart: {
        type: 'line',
        animation: true,
        marginRight: 10,
        events: {
          load: function () {

            // set up the updating of the chart each second
            var series = this.series[0];
            
            packetCounter = this.packetCounter;
            
            setInterval(function ( ) { ...})}}}}}


.......}

So basically I need to access the plotArray variable inside the setInterval function.
How do I do that?

2

Never type the word “function” inside the body of one.

3

https://www.highcharts.com/demo/stock/dynamic-update

I have been following this example for the plotting part.

Is it then impossible to get the data inside an inline function?
Should I create 2 functions outside the plotSimpleBarChart and then make a call?

4

No, you should read the MDN entry on arrow function expressions linked in my previous post and use one.