web-dev-qa-db-de.com

Wie gebe ich die Antwort von einem Observable/http/async-Aufruf in angle2 zurück?

Ich habe einen Dienst, der ein Observable zurückgibt, das eine http-Anfrage an meinen Server sendet und die Daten abruft. Ich möchte diese Daten verwenden, bekomme aber immer undefined. Was ist das Problem?

Bedienung :

@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)
  }
}

Komponente:

@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!
  }
}
59
eko

Ein http-Aufruf in angle/javascript ist ein asynchroner Vorgang ..__ Wenn Sie also einen http-Aufruf durchführen, wird ein neuer Thread zugewiesen, um diesen Aufruf zu beenden und die Ausführung in der nächsten Zeile mit einem anderen Thread zu starten ..__ Deshalb erhalten Sie einen undefinierten Wert Nehmen Sie die folgenden Änderungen vor, um dieses Problem zu beheben

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

Sie können asyncPype verwenden, wenn Sie myEvents nur in der Vorlage verwenden.

Hier ein Beispiel mit asyncPype und Angular4 HttpClient https://stackblitz.com/edit/angular-rhioqt?file=app%2Fevent.service.ts

2
Kliment Ru

Hier ist das Problem, dass Sie this.myEvents in subscribe() initialisieren, was ein asynchroner Block ist, während Sie console.log() gerade außerhalb des subscribe()-Blocks ausführen. Also wird console.log() aufgerufen, bevor this.myEvents initialisiert wird.

Bitte verschieben Sie Ihren console.log () Code auch in subscribe () und Sie sind fertig.

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

Observables sind faul, also müssen Sie sich anmelden, um den Wert zu erhalten. Sie haben den Code ordnungsgemäß in Ihrem Code abonniert, gleichzeitig aber die Ausgabe außerhalb des Abonnementblocks protokolliert. Deshalb ist es "undefiniert".

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

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

Wenn Sie es also im Abonnementblock protokollieren, wird die Antwort ordnungsgemäß protokolliert.

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

Das Ergebnis ist undefiniert, da der Winkelprozess asynchron ist. Sie können wie folgt versuchen:

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

Stellen Sie außerdem sicher, dass Sie Ihre Antwort einer Json-Ausgabe zuordnen. Andernfalls wird Klartext zurückgegeben. Das machst du so:

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