CODEWITHSUNDEEP
angulartypescript
Sergio Gandrus
Sergio Gandrus

Reputation: 159

Set variable value in nested function

I'm trying to access variables inside a typescript class. The first one checkLUCE1 is easily editable adding this.

The second one checkLUCE2 is inside another function and i don't know how to set a new value for it:

export class ServiziConfigurazioneComponent implements OnInit {

constructor(private savelocal: SavelocaleService,
          private globals: GlobalsService) { }


checkLUCE1:boolean = false;
checkLUCE2:boolean = false;

handleFileSelect(evt,servizio,i){

    let target = evt.target || evt.srcElement || evt.currentTarget;
    let idAttr = target.attributes.id;
    let value = idAttr.nodeValue;
    let obj:any;

    document.getElementById(value+'-image').style.display="none";
    document.getElementById(value+'-loading').style.display = "block";

    let files = evt.target.files;
    let file = files[0];
    this.checkLUCE1 = true; //HERE I CAN SET THE VALUE

    if (files && file) {
        let reader = new FileReader();

        reader.onload = function() {
            (<HTMLImageElement>document.getElementById(value+'-image-file')).src  = reader.result;
            let binaryString = reader.result;
            let base64textString = btoa(binaryString);
            //console.log(base64textString);

            let obj = {};
            obj['file-'+servizio+'-'+i]= {
                'file' : base64textString
            };
            checkLUCE2= true; //HERE I CAN'T SET THE VALUE

            localStorage.setItem('currentUserLuceFile-'+i,base64textString);
        };
        reader.readAsDataURL(file);


        document.getElementById(value+'-image').style.display="block";
        document.getElementById(value+'-loading').style.display = "none";

        //this.savelocal.write('currentUserOfferta',JSON.stringify(obj));
    }
  }
}

Upvotes: 0

Views: 2102

Answers (2)

Pablo Lozano
Pablo Lozano

Reputation: 10342

There are three ways to solve it:

Store the context in a variable:

var self=this;

document.onload=function () {
  self.myAttribute=...
};

Use arrow functions, where the context is set in declaration time, not in execution time:

document.onload=() => {
  this.myAttribute=...
}

Bind the context to the function using bind:

document.onload=(function () {
  this.myAttribute=...
}).bind(this);

Upvotes: 0

indexoutofbounds
indexoutofbounds

Reputation: 803

You can use arrow functions in order to achive this. So instead of declaring your function like reader.onload = function() {...} you can use reader.onload = () => {...}. Have a look at this example.

class Bla {

    // Your variables
    luce1: string = "sdfgsy";
    luce2: string = "sdfysd";

    // In your case that was "handleFileSelect"
    public doSomething() {
        alert(this.luce1);
        // this is what you are looking for. Inside the arrow function you can set the class level variable
        let anonymous = () => { this.luce2 = "Success" }

        anonymous();

        alert(this.luce2);
    }

}

let bla = new Bla();

bla.doSomething();

Upvotes: 4

Related Questions