angulaire 2 undefined obtenir en dehors de souscrire

Question

Bonsoir à tous.

J'ai un problème lors de la récupération des données de mon service auquel j'ai souscrit par le biais de souscrire; Je reçois des données à l'intérieur de la fonction subscribe mais à l'extérieur, elle est UNDEFINED;

Voici le code.

userservice.ts

import { Injectable } from "@angular/core"; 
import { Http, Response, Headers } from "@angular/http"; 
import 'rxjs/Rx'; 
import { Observable } from "rxjs"; 

@Injectable() 
export class UserService{ 
    constructor(private http: Http){ 

    } 

getRegistrations(): Observable<any> { 
    return this.http.get('http://127.0.0.1:8000/api/candidatesL') 
     .map(
     (response: Response) => { 
      return response.json().candidates; 
     } 
    ); 
    } 

    } 

all-registration.ts

import { Component, OnInit } from '@angular/core'; 
import { NgForm } from "@angular/forms"; 
import { Candidate } from "../candidate.interface"; 
import { Response } from "@angular/http"; 
import { UserService } from "../user.service"; 

@Component({ 
    selector: 'app-all-registration', 
    templateUrl: './all-registration.component.html', 
    styleUrls: ['./all-registration.component.css'] 
}) 
export class AllRegistrationComponent implements OnInit { 

    candidates: Candidate[]; 

    constructor(private userService: UserService) {} 

    ngOnInit() { 

       this.getRegistration() 
       console.log(this.candidates); 
      } 


    getRegistration(){ 
    this.userService.getRegistrations() 
     .subscribe(
        (candidates: Candidate[]) => this.candidates = candidates, 
        (error: Response) => console.log(error), 
       ) 
    } 

    } 

Quand je suis à l'intérieur du .subscribe (...) Je peux afficher les données, mais en dehors, je obtenir UNDEFINED.

S'il vous plaît j'attends votre réponse ...

Answer 1

car il est un appel asynchrone, vous ne serez pas obtenir les résultats juste après l'appel dans votre ngOnInit(). mettre la déclaration de la console dans votre subscribe appeler et vous verrez les candidats

getRegistration(){ 
     this.userService.getRegistrations() 
      .subscribe(
         (candidates: Candidate[]) => { 
      this.candidates = candidates 
      console.log(this.candidates); 
      }, 
         (error: Response) => console.log(error), 
        ) 
     } 

Mise à jour vous avez déjà des candidats définis comme propriété de votre classe, vous pouvez afficher sa valeur dans votre code html comme:

<div>{{candidates}}<div> 

ou si son JSON

<div *ngIf="candidates">{{candidates | json}}<div> 

dès que vous attribuez la valeur abonner, il affichera quelle que soit la valeur. Si vous voulez vérifier pour afficher la valeur seulement quand elle a une valeur (après la fin de l'abonnement) vous pouvez toujours mettre une directive * ngIf pour vérifier la valeur sur l'élément html.

Answer 2

Votre code fonctionne parfaitement bien et c'est le comportement normal de la variable de type Observable.

ngOnInit() { 

    this.getRegistration() // this will set the value of this.candidates in future as its async. 
    console.log(this.candidates); // this line will executed immediately before the observable returns a value. 
} 

Ainsi votre console.log vous a donné undefined. C'est toujours un bon conseil pour gérer les valeurs à l'intérieur des observables. Comme votre service renvoie un observable, une valeur peut en être extraite en l'abonnant seulement. Rappelez-vous que ce n'est pas la variable directe mais une variable observable<any>.