Exploring ways to retrieve a function-scoped variable from within an Angular subscribe function

Question

Exploring ways to retrieve a function-scoped variable from within an Angular subscribe function

Here's the scenario: I have a simple question regarding an Angular component. Inside this component, there is a function structured like this:


somethingCollection: TypeSomething[]
...
public deleteSomething(something: TypeSomething): void {
    // something variable is within this scope
    this.someAPI.deleteSomething(something.id).subscribe( (res) => {
       // need to update this.somethingCollection here
       // but unable to access 'something' in outer scope
    }
}

It's clear that for updating this.somethingCollection, we require 'something.id'. However, once inside the subscribe method, I lose access to it.

Is there anyone who can guide me on how to retain access to function scoped variables within the subscribe method?

angular typescript scope

Answer 1

Answer №1

When dealing with overlapping function problems, it is crucial to prevent the loss of the value of this by storing references to the parent function's this using the scope chain.

By using aliases such as self, context, $this, or any other variable name when assigning the value of this to it, the reference remains fixed similar to a regular variable.

somethingCollection: TypeSomething[]
...
public deleteSomething(something: TypeSomething): void {
    let self = this;
    this.someAPI.deleteSomething(something.id).subscribe( (res) => {
       self.somethingCollection // access somethingCollection....
       // this.somethingCollection is undefined
    }
}

Answer 2

When dealing with overlapping function problems, it is crucial to prevent the loss of the value of this by storing references to the parent function's this using the scope chain.

By using aliases such as self, context, $this, or any other variable name when assigning the value of this to it, the reference remains fixed similar to a regular variable.

somethingCollection: TypeSomething[]
...
public deleteSomething(something: TypeSomething): void {
    let self = this;
    this.someAPI.deleteSomething(something.id).subscribe( (res) => {
       self.somethingCollection // access somethingCollection....
       // this.somethingCollection is undefined
    }
}

Answer 3

Answer №2

That statement is not accurate

export class AppComponent implements OnInit  {
  name = 'Angular ' + VERSION.major;
  constructor(private dataService:DataService){}


  public removeItem(item: any): void {
    console.log(item)
    this.dataService.getData(item.id).subscribe( (res) => {
      console.log(item,this.name,res)
    })
  }
  ngOnInit()
  {
    this.removeItem({id:3})
  }

}

view a demo on stackblitz

Answer 4

That statement is not accurate

export class AppComponent implements OnInit  {
  name = 'Angular ' + VERSION.major;
  constructor(private dataService:DataService){}


  public removeItem(item: any): void {
    console.log(item)
    this.dataService.getData(item.id).subscribe( (res) => {
      console.log(item,this.name,res)
    })
  }
  ngOnInit()
  {
    this.removeItem({id:3})
  }

}

view a demo on stackblitz

Exploring ways to retrieve a function-scoped variable from within an Angular subscribe function

Answer №1

Answer №2

Similar questions

What purpose does the pipe method serve in RxJS?

Exploring the dynamic duo of SystemJS and AngularJS 2

The test failed to execute due to disconnection (0 occurrences) as no message was received within the 30000 ms timeframe

Are Handlebars and Angular 2 compatible?

Instructions for inserting a hyperlink into a column of a table with the *ngFor directive in Angular2

Jest encounters an issue while attempting to import Primeng CSS files

What is the process for implementing a new control value accessor?

Angular 5 update causing 'NgModule not found' error

I am encountering difficulty accessing my index.html file located in the views directory. Whenever I try to access it through localhost 3000, I receive an error message saying "cannot get"

Error: The variable _ is undefined when trying to use the .map() function on an array

Handling linting errors for getInitialProps return type in NextJS with Typescript

Typescript encounters ERROR TS1128: Expecting a declaration or statement

What is the best way to execute multiple functions simultaneously in Angular?

The compatibility issue between the text-mask library and the Angular material datepicker is causing functionality problems

Error encountered in Storybook: The value is not iterable (property Symbol(Symbol.iterator) cannot be read)

Having trouble manipulating text or values of angular elements with Selenium and Python

Angular - Loading images on the fly

Using Angular with Web API to transmit FormFile data from client to API

How can I structure the response from HttpClient to make it compatible with *ngFor

Combine two streams under certain conditions using RxJs