How callbacks work

bdmfab · February 21, 2018, 6:05pm

I’m a noob to Ionic/Angular/Javascript and need some help understanding the way the callbacks work. I have an application that I need to change a variable that is button text and it only works some of the time. Here is what I have.

From an item list

deviceSelected(device){
    this.ble.stopScan().then(() => {console.log('Scan has stopped');
                                                     this.devices = [];
                                                     clearTimeout(this.scanTimer);
                                                     this.setStatus('Connecting to ' + device.name); //End up with this
                                                     this.connect(device); });                                    
  }

  connect(device){  
    this.ble.connect(device.id).subscribe(
      peripheral => this.onConnected(peripheral),
      peripheral => {console.log('Disconnected')}
    );  
  }

onConnected(peripheral){
      this.btP.connectedTo = peripheral;     
      this.setStatus('Connected to ' + this.btP.connectedTo.name);    //Want this
  }

setStatus(message){
      console.log(message);
      this.sbt = message;   //This is the button variable
   }

Button to update

<button ion-button  block color="primary" icon-end (click)=scan()>
    {{sbt}}
  <ion-icon name="bluetooth" ></ion-icon>
  </button>

When complete I end up this this status this.setStatus('Connecting to ’ + device.name);
I get the console.log for “this.setStatus('Connected to ’ + this.btP.connectedTo.name);” but the button text does not update Maybe someone can shed some light on what I am missing.

Thanks

sdetweil · February 21, 2018, 7:50pm

can u post the scan() routine too

bdmfab · February 21, 2018, 9:43pm

Here are the other functions

The blue tooth is working …just cant update the status.

scan(){
    console.log('Scan button pressed')
    this.setStatus('Scanning...') ;
    this.devices = [];  // clear list

    this.ble.scan([], 20).subscribe(
    device => this.foundDevice(device), 
    error => this.onError(error)
    );

   this.scanTimer = setTimeout(this.setStatus.bind(this), 20000, this.status.rdy );  
  
  }

foundDevice(device){
    if (device.name == undefined){
      device.name = 'Unknown';
     }

    if (this.filter == false){
      //console.log('Discovered ' + JSON.stringify(device, null, 2));
      this.ngZone.run(() => {this.devices.push(device);})
    }else{     
      if (device.name.includes('Something')){
        console.log('Discovered ' + JSON.stringify(device, null, 2));
       // console.log('Device Name = ' + JSON.stringify(device.name, null, 2));
          this.ngZone.run(() => {this.devices.push(device);})
      }
    }
  }//foundDevice

onError(error){
    let toast = this.toastCtrl.create({
      message: 'Error' + error,
      position: 'middle',
      duration: 5000});
  
      toast.present();    
  }//onError

The code from the list as well

<ion-list> 
    <button ion-item *ngFor="let device of devices" (click)=deviceSelected(device)>
      <h2>{{ device.name || 'Unknown' }}</h2>
      <p>{{ device.id }}</p>
      <p>RSSI: {{ device.rssi }}</p>
    </button>  
</ion-list>

Thanks

sdetweil · February 22, 2018, 2:53pm

you don’t have a bind to the data, so there is no expectation that the view should pay attention.

see Passing Value of an Input type text to the home.ts

but I would expect that you would need an [ngModel]=‘device’ on your ngFor

bdmfab · February 22, 2018, 5:59pm

Thanks for the reply. The list is working properly I grabbed that code from an older example. But I got it to work thanks to some YouTube videos.

Thanks to Paul Halliday here:
Halliday Async

and Max here:
Max - Callback & Promises

scan(){
    console.log('Scan button pressed')
    this.setStatus('Scanning...') ;
    this.devices = [];  // clear list

    this.ble.startScan([]).subscribe(
    device => this.foundDevice(device), 
    error => this.onError(error)
    );

   this.scanTimer = setTimeout(() => {this.stopscan()}, 20000 );  
  
  }

  async stopscan(){
    const a = await this.ble.stopScan();
    this.setStatus(this.status.rdy);
    
  }

  async deviceSelected(device){
    this.devices = [];
    clearTimeout(this.scanTimer);
    const a = await this.ble.stopScan();    
    this.setStatus('Connecting to ' + device.name);
    this.ble.connect(device.id).subscribe(
      peripheral => this.onConnected(peripheral),
      peripheral => {console.log('Disconnected')});  
                   
  }

  onConnected(peripheral){
    this.ngZone.run(() => {
      this.btP.connectedTo = peripheral;
      this.setStatus('Connected to ' + this.btP.connectedTo.name);      
    });    
            
  }//onConnected

The use of the async allowed me to clean up my code quite a bit, I’m sure there are better ways but its better than it was. It really came down to the absence of the this.ngZone.run .

sdetweil · February 22, 2018, 6:12pm

i was going to suggest the ngZone.run, bu tthe code u posted had it already… i used that to solve the same problem with my app