Issue with Angular 2: Service not reflecting updated variable

Question

Issue with Angular 2: Service not reflecting updated variable

I am currently working on creating an API service and trying to assign the data to a variable. However, I am facing an issue where the variable is not updating and ends up being undefined when I try to log it after calling the API service.

import {Component,Input,Output,EventEmitter} from 'angular2/core';
import {NgClass,NgFor} from 'angular2/common';
import {Observable} from 'rxjs/Observable';
import {ChangeDetectionStrategy} from 'angular2/core';
import {ValuesPipe} from '../pipes/values';
import {ApiRequestService, Query} from '../services/apiRequestService';

@Component({
selector: 'browsePCLatestRelease',  
directives: [NgClass,NgFor],
changeDetection: ChangeDetectionStrategy.OnPush,
pipes: [ ValuesPipe ],
styles: [ require('./browsePCLatestRelease.less') ],
template: require('./browsePCLatestRelease.html')
})
export class browsePCLatestRelease {

public arrayOfKeys;
pcLatestrelease:Array<any> ;
query: Query;

constructor(private _apiService: ApiRequestService) {
}

ngOnInit() {

this.query = this._apiService.createQuery('browsePC.getIssue');
this.query.params({
  volume: '60',
  issue: '50'
});
this._apiService.execute(this.query)
  .subscribe(

    data => this.pcLatestrelease=data,
    error => console.log(error),
    () => console.log('pcLatestrelease retrieved')

  );

console.log('this.pcLatestrelease');
console.log(this.pcLatestrelease);  

}


}

HTML

<div *ngFor = "#thisRelease of pcLatestrelease">
        {{thisRelease.title}}
</div>

If anyone has any insights or solutions, I would appreciate your help. Thank you in advance.

typescript angular

Answer 1

Answer №1

The function does not execute line by line in the order listed

export class browsePCLatestRelease {

  ...

  ngOnInit() {

    this.query = this._apiService.createQuery('browsePC.getIssue');
    this.query.params({
      volume: '60',
      issue: '50'
    });
    this._apiService.execute(this.query)
    .subscribe(
  // A function is passed to subscribe of an observable
  // This function gets called when data arrives from the server
      data => this.pcLatestrelease=data,
      error => console.log(error),
      () => console.log('pcLatestrelease retrived')
    );

  // The following code is executed immediately after the function is passed to subscribe, 
  // but the function has not been executed yet
    console.log('this.pcLatestrelease');
    console.log(this.pcLatestrelease);  // logged as undefined
  }
}

When the data eventually arrives

data => this.pcLatestrelease=data,

the above code is executed and the value is assigned to this.pcLatestrelease

If you want your code to be executed after the data arrives, use

export class browsePCLatestRelease {

  ...

  ngOnInit() {

    this.query = this._apiService.createQuery('browsePC.getIssue');
    this.query.params({
      volume: '60',
      issue: '50'
    });
    this._apiService.execute(this.query)
    .subscribe(
  // A function is passed to subscribe of an observable
  // This function gets called when the data arrives from the server
      data => {
         this.pcLatestrelease=data;
         console.log('this.pcLatestrelease');
         console.log(this.pcLatestrelease);  // logged as undefined
      },
      error => console.log(error),
      () => console.log('pcLatestrelease retrived')
    );

  }
}

update

import {Component,Input,Output,EventEmitter, NgZone} from 'angular2/core';

...

export class browsePCLatestRelease {

  constructor(private _apiService: ApiRequestService, private _zone.NgZone) {
  }    

  ...

  ngOnInit() {

    this.query = this._apiService.createQuery('browsePC.getIssue');
    this.query.params({
      volume: '60',
      issue: '50'
    });
    this._apiService.execute(this.query)
    .subscribe(
  // A function is passed to subscribe of an observable
  // This function gets called when the data arrives from the server
      data => {
         this.zone.run(() => {
           this.pcLatestrelease=data;
           console.log('this.pcLatestrelease');
           console.log(this.pcLatestrelease);  // logged as undefined
         });
      },
      error => console.log(error),
      () => console.log('pcLatestrelease retrived')
    );

  }
}

Answer 2

The function does not execute line by line in the order listed

export class browsePCLatestRelease {

  ...

  ngOnInit() {

    this.query = this._apiService.createQuery('browsePC.getIssue');
    this.query.params({
      volume: '60',
      issue: '50'
    });
    this._apiService.execute(this.query)
    .subscribe(
  // A function is passed to subscribe of an observable
  // This function gets called when data arrives from the server
      data => this.pcLatestrelease=data,
      error => console.log(error),
      () => console.log('pcLatestrelease retrived')
    );

  // The following code is executed immediately after the function is passed to subscribe, 
  // but the function has not been executed yet
    console.log('this.pcLatestrelease');
    console.log(this.pcLatestrelease);  // logged as undefined
  }
}

When the data eventually arrives

data => this.pcLatestrelease=data,

the above code is executed and the value is assigned to this.pcLatestrelease

If you want your code to be executed after the data arrives, use

export class browsePCLatestRelease {

  ...

  ngOnInit() {

    this.query = this._apiService.createQuery('browsePC.getIssue');
    this.query.params({
      volume: '60',
      issue: '50'
    });
    this._apiService.execute(this.query)
    .subscribe(
  // A function is passed to subscribe of an observable
  // This function gets called when the data arrives from the server
      data => {
         this.pcLatestrelease=data;
         console.log('this.pcLatestrelease');
         console.log(this.pcLatestrelease);  // logged as undefined
      },
      error => console.log(error),
      () => console.log('pcLatestrelease retrived')
    );

  }
}

update

import {Component,Input,Output,EventEmitter, NgZone} from 'angular2/core';

...

export class browsePCLatestRelease {

  constructor(private _apiService: ApiRequestService, private _zone.NgZone) {
  }    

  ...

  ngOnInit() {

    this.query = this._apiService.createQuery('browsePC.getIssue');
    this.query.params({
      volume: '60',
      issue: '50'
    });
    this._apiService.execute(this.query)
    .subscribe(
  // A function is passed to subscribe of an observable
  // This function gets called when the data arrives from the server
      data => {
         this.zone.run(() => {
           this.pcLatestrelease=data;
           console.log('this.pcLatestrelease');
           console.log(this.pcLatestrelease);  // logged as undefined
         });
      },
      error => console.log(error),
      () => console.log('pcLatestrelease retrived')
    );

  }
}

Issue with Angular 2: Service not reflecting updated variable

Answer №1

Similar questions

Tips for confirming a sub string is present in an array using JavaScript/TScript

Is there a way to utilize an Event Emitter to invoke a function that produces a result, and pause until the answer is provided before continuing?

Executing file upload in parent component with Angular 2

Understanding how to retrieve the Request Header value when entering my Angular application

I'm currently endeavoring to integrate SignalR into my Vue project and encountering an issue

Tips for verifying the Reactive formControl/formArray when submitting

Function exported as default in Typescript

Oops! There seems to be an issue with the code: "TypeError: this

Observable<Any> Filter

An issue arose while compiling the template for 'AppRoutingModule', indicating that function expressions are not compatible with decorators

What is the best way to incorporate "thread.sleep" in an Angular 7 app within a non-async method like ngOnInit()?

Having difficulty importing SVG files in TypeScript

What is the best way to prevent re-initialization of a child component when there are changes in the

Angular 4's OrderBy Directive for Sorting Results

Guide to keep the loader running until the API response is retrieved in Ionic 4

Learn the steps to establish a one-to-many relational record with the help of Node.js and Sequelize-Typescript

Utilizing TypeScript in conjunction with Vue and the property decorator to assign default values to props

Tips for verifying that parameters possess designated characteristics in TypeScript

Utilizing type guards in prop functions for conditional rendering within React TypeScript adds an extra layer

replace the tsconfig.json file with the one provided in the package