angular 2 unsubscribed variable becomes null

Question

angular 2 unsubscribed variable becomes null

I'm having an issue with calling a service in my component, causing the data to always go null. Here is an example of the code:

The service method :

getOneUser() {
    return this._http.get(globals.serverIp + '/user/getOneUser/' + this._ls.getCurrentUserName(), { headers: this.headers})
      .map((response: Response) => <UserParser> response.json());
  }

The method in the component :

updateParametre(message: string){
    let currentUser = new User();

    this._us.getOneUser().subscribe(
      data =>currentUser = data.data,
      error => console.log('error from updateParam ParamtereComponenet ' + error),
      () => console.log(currentUser)
    );
let anotherinstance : User = currentuser ;
console.log(currentUser);
  }

Attempting to console log the currentUser inside the subscribe method:

    {id: 9,
 initials: "YCI",
 nom: "CHABLI",
 prenom: "Yassin",
 password: "$2a$10$iWVnXs/2TwOk7CBr5RuQ.e/1c/BTlxsvkjHyYrtOgKUiRMll2EupO"}

However, the object `anotherintance` becomes null, and trying to console log the `currentUser` outside of the subscribe also results in null.

What could be causing this issue? Please help.

angular typescript service

Answer 1

Answer №1

anotherInstance is confined to the scope of that function. To have access to it, you must declare it outside of that particular scope.

The subscribe method works asynchronously. When you set anotherInstance to currentUser, currentUser only holds a new User() at that moment. As a result, it will become undefined once the function is finished executing.

Maintain appropriate variable scopes and assign values when you actually obtain the necessary data:

anotherInstance: User;

updateParametre(message: string){
    let currentUser = new User();

    this._us.getOneUser().subscribe(
      (data) => { 
         currentUser = data.data,
         this.anotherInstance = currentUser
      }
      (error) => console.log(`error from updateParam ParamtereComponenet: ${error}`),
      () => console.log(currentUser)
    );
  }

As a result, anotherInstance becomes a property of your class and can be accessed beyond the confines of the updateParameter method.

Answer 2

anotherInstance is confined to the scope of that function. To have access to it, you must declare it outside of that particular scope.

The subscribe method works asynchronously. When you set anotherInstance to currentUser, currentUser only holds a new User() at that moment. As a result, it will become undefined once the function is finished executing.

Maintain appropriate variable scopes and assign values when you actually obtain the necessary data:

anotherInstance: User;

updateParametre(message: string){
    let currentUser = new User();

    this._us.getOneUser().subscribe(
      (data) => { 
         currentUser = data.data,
         this.anotherInstance = currentUser
      }
      (error) => console.log(`error from updateParam ParamtereComponenet: ${error}`),
      () => console.log(currentUser)
    );
  }

As a result, anotherInstance becomes a property of your class and can be accessed beyond the confines of the updateParameter method.

angular 2 unsubscribed variable becomes null

Answer №1

Similar questions

Error message 'No suitable overload for this function' occurs while attempting to retrieve a Map

Tips for expanding a child route to occupy the entire page within a nested route in Angular

What is the best way to restore mat-select to its original state when clicked?

ability to reach the sub-element dictionaries in typescript

There seems to be a glitch in the input found within the form array

Dealing with a Typescript challenge of iterating over a tuple array to extract particular values

Utilizing dynamic CSS classes within an ngFor loop

Implement Bootstrap into Asp.Net Core 6 for the scaffolded Identity _Layout.cshtml

Strange Typescript Issue: Dependency Imports Not Recognized as Top-Level Module

Having trouble obtaining search parameters in page.tsx with Next.js 13

Is there a way to align cards to stack on both the right and left sides of each other?

Tips for testing nested subscribe methods in Angular unit testing

Unable to access /route upon refreshing page in Angular 7

Utilize external libraries with Angular 2 for Just-In-Time and Ahead-of-Time compilation techniques

"Array.Find function encounters issues when unable to locate a specific string within the Array

Is there a beginner's pack or trial version available for utilizing TypeScript with IBM Cloud Functions / OpenWhisk?

What is the abbreviated method of setting a default value for an optional String in Swift?

Guide on showing error message according to personalized validation regulations in Angular 2?

Mysterious attributes of angular 6's <table mat-table> tag

Resolving Angular 4 issue by delivering Observable of an array of strings