How can I access a component variable within a foreach loop in Typescript?

Question

How can I access a component variable within a foreach loop in Typescript?

Can anyone please explain how I can access a component variable within a foreach loop? Check out my code on Plunker

 public exampleVariable:number;

  test(){
    console.log('fired');
    var x  =[1,2,3,4];

    x.forEach(function (e){
      this.exampleVariable = e;
    })

    console.log( this.exampleVariable);
  }

javascript angular typescript

Answer 1

Answer №1

When you utilize function (e), the context of this within it will be directed to the function's scope rather than the class.

Opt for using the Arrow Function (or Fat Arrow) instead:

x.forEach((e) => {
    this.testVariable = e;
})

If you only have 1 parameter, you can also skip the parentheses around it:

x.forEach(e => {
    this.testVariable = e;
})

Check out this informative article that elaborates on its functionality: https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

Answer 2

When you utilize function (e), the context of this within it will be directed to the function's scope rather than the class.

Opt for using the Arrow Function (or Fat Arrow) instead:

x.forEach((e) => {
    this.testVariable = e;
})

If you only have 1 parameter, you can also skip the parentheses around it:

x.forEach(e => {
    this.testVariable = e;
})

Check out this informative article that elaborates on its functionality: https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

Answer 3

Answer №2

The value of the keyword this is not fixed and varies depending on the surrounding context. One way to handle this situation is by assigning the value of this to another variable like so:

public testVariable:number;

test(){
    console.log('function executed');
    var array  =[1, 2, 3, 4];

    var self = this;
    array.forEach(function (element){
        self.testVariable = element;
    })

    console.log( this.testVariable);
}

Answer 4

The value of the keyword this is not fixed and varies depending on the surrounding context. One way to handle this situation is by assigning the value of this to another variable like so:

public testVariable:number;

test(){
    console.log('function executed');
    var array  =[1, 2, 3, 4];

    var self = this;
    array.forEach(function (element){
        self.testVariable = element;
    })

    console.log( this.testVariable);
}

How can I access a component variable within a foreach loop in Typescript?

Answer №1

Answer №2

Similar questions

Issue with React and Material UI: The Textfield's "onChange" event is not being triggered

React Redux Loading progress bar for seamless navigation within React Router

Struggling with Mocha, supertest, and passport when testing authenticated routes with JWT authentication

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

What is the best way to implement a user-customizable dynamic URL that incorporates API-generated content in a NextJS and React application?

The PropertyOverrideConfigurer encountered an issue while processing the key 'dataSource' - The key 'dataSource' is invalid, it was expecting 'beanName.property'

Explain the functioning of the Node.js event loop and its ability to manage numerous requests simultaneously

Show details when clicked with various elements

The content of the text does not align. Alert in React 16

IntelliJ is indicating a typescript error related to react-bootstrap-table-next

Typescript is being lenient with incorrect use of generics, contrary to my expectations of error being thrown

Angularjs 2 Error: Unable to access the 'infos' property of an undefined object using the Http Client

Executing a javascript function from an ajax-loaded webpage

How can you limit a type reference to a specific file in TypeScript?

Discovering relative URLs within an MVC 4 framework

The data input from the HTML is not being correctly transferred to the modal

Creating a Redis client in Typescript using the `redis.createClient()` function

Issues with the update of class properties in Node.js using Express

Is there a way to access or delete a randomly generated document ID in Firestore?

Replacing strings using Regex capture groups in JavaScript