How to access class variable in callback in Typescript?

Question

Here is my current code:

import {Page} from 'ionic-angular';
import {BLE} from 'ionic-native';

@Page({
  templateUrl: 'build/pages/list/list.html'
})
export class ListPage { 
  devices: Array<{name:string, id: string}>;

  constructor() {  
    this.devices=[];       
  } 
  startScan (){
    this.devices = []; // This "this" exists and works fine
    BLE.scan([],5).subscribe(
      (device)=>{        
        if(device.name){
          this.devices.push({name:device.name,id:device.id});  // this.devices does not exists
        }             
      },
      (err) => {
        console.log(JSON.stringify(err));
      }
      );
  }

  connectToDevice(device){
    BLE.connect(device.id).subscribe(success=>{
       console.log(JSON.stringify(success));
    });
  }
}

When calling startScan function I am trying to push returned device to array, however, this.devices is not available. I have tried saving this (self=this), but still with no luck. Can anyone help me to understand what i am missing?

UPDATE: Setting

var self = this;

at the top of startScan() and then using it in .subscribe callback is the answer!

Where are you calling startScan? It is possible that you have it bound to the wrong (or no) object. Try adding console.log(this) at the top of startScan and see if it logs the object you are expecting. — Alex McMillan
– Alex McMillan, Commented Apr 19, 2016 at 21:24
startScan is called from view (html) on button click. this.devices does exists before I call BLE.scan, however, in a subscribe callback "this" becomes "subscribe" context — Tomas
– Tomas, Commented Apr 20, 2016 at 7:04
I have absolutely no idea how trying self = this at the top of startScan() didn't work for you. There's no logical reason it shouldn't work hehe. If you do that, and then console.log(self) inside of the subscribe callback, what do you get? ----- Secondly, have you tried making a variable that references, notthis, but this.devices specifically? Maybe like var _devices = this.devices; after the declaration in startScan. Then _devices.push(... in the subscribe. Let us know! — aaronofleonard
– aaronofleonard, Commented Apr 20, 2016 at 15:08
I must be going mad.... Tried putting var self = this; and it worked this time.... I am sure I have tried this before as this would be something I would do writing javascript. So, yeah, it works :) it does not update view though when pushing, but i am sure its angular related. Thanks! — Tomas
– Tomas, Commented Apr 21, 2016 at 6:44
Brilliant! Though, as it's Typescript, shouldn't it be let self = this;? That worked for me anyway. — jon_two
– jon_two, Commented Feb 13, 2017 at 17:00

basarat · Accepted Answer · 2023-05-27 11:33:10Z

13

this.devices is not available

A common issue. Change startScan to an arrow function:

startScan = () => {
    this.devices = [];
    BLE.scan([],5).subscribe(
      (device)=>{        
        if(device.name){
          this.devices.push({name:device.name,id:device.id});  // this.devices does not exists
        }             
      },
      (err) => {
        console.log(JSON.stringify(err));
      }
      );
  }

More

https://basarat.gitbook.io/typescript/future-javascript/arrow-functions

edited May 27, 2023 at 11:33

answered Apr 20, 2016 at 1:13

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tomas Over a year ago

Thanks for the reply, but I have already tried this. "this.devices" is already available when I call "startScan", the problem is with "BLE.scan", in subscribe callback, "this" referrers to "subscribe" context

furkankatman Over a year ago

link is broken dude :(

basarat Over a year ago

Link fixed now 🌹

Katax Emperore · Accepted Answer · 2018-01-17 12:54:34Z

Here is my code, it add characters to html textarea with button click event.

HTML

<div class="console-display">
<textarea [(ngModel)]="textAreaContent" name="mainText"></textarea>
    <div class="console-keys">
        <button (click)="getKeyInput($event)" name="key01" type="button" value="1">1</button>
        <button (click)="getKeyInput($event)" name="key02" type="button" value="2">2</button>
    </div>
</div>

TS

export class HomeComponent {
  tempString = "64";
  getKeyInput(event){
    let self = this;
    manageTextArea(self, event.target.value, this.textAreaContent);
  }
}

function manageTextArea(self , ch : string, textArea : string): void {
  if (checkCharacter_Number(ch)){
    self.textAreaContent += ch;
  }
  console.log(self.tempString);
}

It works fine.

Collectives™ on Stack Overflow

How to access class variable in callback in Typescript?

2 Answers 2

More

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

More

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related