Abonnez-vous à observable renvoie undefined

Question

J'essaie donc de m'abonner à un service simple qui renvoie des données à partir d'un fichier JSON local.

J'ai réussi à faire fonctionner le service, je peux le déconnecter dans la fonction, mais quand je m'abonne au service dans le composant angulaire 2, il est toujours indéfini. Je ne suis pas sûr pourquoi? Toute aide serait très appréciée.

API Service

export class ApiService { 
    public data: any; 

    constructor(private _http: Http) { 
    } 

    getData(): any { 
     return this._http.get('api.json').map((response: Response) => { 
     console.log('in response', response.json()); //This logs the Object 
     this.data = response.json(); 
     return this.data; 
    }) 
    .catch(this.handleError); 
    } 
} 

Component

export class AppComponent { 
    public data: any 
    public informationData; 

    constructor(private _api: ApiService) {} 

    public ngOnInit(): void { 
     console.log(this.getDataFromService()); // This return undefined 
    } 

    public getDataFromService() { 
     this._api.getData().subscribe(response => { 
      this.informationData = response; 
      return this.informationData; 
     }); 
    } 
} 

Answer 1

Essayez avec:

getData(): any { 
     return this._http.get('api.json'); 
} 

ou

getData(): any { 
      return this._http.get('api.json').map((response: Response) => { 
    response.json(); 
}) 

Answer 2

Vous avez un problème entre la synchronisation et la fonction asynchrone. Votre problème est: getDateFromService est synchrone et le contenu à l'intérieur est asynchrone. Ainsi, lorsque la fonction ngOnInit appelle getDataFromService, votre code n'attend pas la tâche asynchrone. vous avez getDataFromService besoin de retourner un observateur ou besoin d'implémenter le retour de votre API (vous devez choisir).

public ngOnInit(): void { 
    console.log(this.getDataFromService().subscribe(data => console.log(data)); // This return undefined 
} 

public getDataFromService() { 
    return this._api.getData(); 
} 

Answer 3

Peut-être que quelques images aider?

Les chiffres indiqués ici indiquent l'ordre des opérations.

Envoyez le Http Demande

1. Component est initialisé et appelle la méthode getMovies du movieService.
2. La méthode movieService getMovies renvoie un Observable. PAS les données à ce stade.
3. Le composant appelle subscribe sur l'Observable renvoyé. La demande get est envoyée au serveur pour traitement.
4. La méthode ngOnInit est terminée.

Tout code situé après le subscribe ne peut pas accéder à la propriété movies car les données n'ont pas encore été renvoyées.

recevoir la réponse Http

À un moment donné dans le temps ... PLUS TARD

Les films
6. sont retournés au service.
7. Si le processus a réussi, la première fonction de rappel est exécutée.
8. La propriété movies locale est attribuée aux films renvoyés par le service. C'est seulement ici que la propriété des films est finalement définie.

Une tentative d'accès à la propriété movies avant l'étape 8 entraîne une erreur.

Peut-on accéder à cette valeur? NO

Pour résoudre ce problème:

Answer 4

objResponse; 
this.service.getData().subscribe((result: any)=> { 
this.objResponse=result; 
} 

quelque chose de retour ne sera pas nécessaire