web-dev-qa-db-fra.com

Comment renvoyer la réponse d'un appel Observable/http/async dans angular2?

J'ai un service qui renvoie un observable qui envoie une requête http à mon serveur et récupère les données. Je veux utiliser ces données mais je finis toujours par obtenir undefined. Quel est le problème?

Un service :

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEventList(): Observable<any>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get("http://localhost:9999/events/get", options)
                .map((res)=> res.json())
                .catch((err)=> err)
  }
}

Composant: 

@Component({...})
export class EventComponent {

  myEvents: any;

  constructor( private es: EventService ) { }

  ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
        });

    console.log(this.myEvents); //This prints undefined!
  }
}
javascriptangularasynchronoustypescriptobservable
59
eko

Passer un appel http en angular/javascript est une opération asynchrone . Ainsi, lorsque vous appelez http, un nouveau thread sera assigné pour terminer cet appel et commencer à exécuter la ligne suivante avec un autre thread . C'est pourquoi vous obtenez une valeur indéfinie . alors faites le changement ci-dessous pour résoudre ce problème

this.es.getEventList()  
      .subscribe((response)=>{  
       this.myEvents = response;  
        console.log(this.myEvents); //<-this become synchronous now  
    });
8
RAVI PATEL

Vous pouvez utiliser asyncPype si vous utilisez myEvents uniquement dans le modèle.

Voici un exemple avec asyncPype et Angular4 HttpClient https://stackblitz.com/edit/angular-rhioqt?file=app%2Fevent.service.ts

2
Kliment Ru

Le problème est que vous initialisez this.myEvents dans subscribe(), qui est un bloc asynchrone, alors que vous exécutez console.log() à la sortie du bloc subscribe(). Donc, console.log() être appelé avant que this.myEvents ne soit initialisé.

Veuillez déplacer votre code console.log () aussi à l'intérieur de subscribe () et vous avez terminé.

ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
            console.log(this.myEvents);
        });
  }
1
Suneet Bansal

Les observables sont paresseux, vous devez donc vous abonner pour obtenir la valeur. Vous l'avez correctement souscrit dans votre code mais avez simultanément enregistré la sortie en dehors du bloc "subscribe". C'est pourquoi c'est 'indéfini'.

ngOnInit() {
  this.es.getEventList()
    .subscribe((response) => {
        this.myEvents = response;
    });

  console.log(this.myEvents); //Outside the subscribe block 'Undefined'
}

Donc, si vous vous enregistrez dans le bloc subscribe, il enregistrera la réponse correctement.

ngOnInit(){
  this.es.getEventList()
    .subscribe((response)=>{
        this.myEvents = response;
        console.log(this.myEvents); //Inside the subscribe block 'http response'
    });
}
0
Kooldandy

Le résultat n'est pas défini car le processus angulaire est asynchrone. vous pouvez essayer comme ci-dessous:

async ngOnInit(){
    const res = await this.es.getEventList();
    console.log(JSON.stringify(res));
}
0
NhutLe

Assurez-vous également de mapper votre réponse sur une sortie JSON. Sinon, le texte brut sera renvoyé. Vous le faites comme ceci:

getEventList(): Observable<any> {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

return this.http.get("http://localhost:9999/events/get", options)
            .map((res)=>{ return res.json();}) <!-- add call to json here
            .catch((err)=>{return err;})
}
0
luukgruijs