Razão:
A razão disso undefined
é que você está fazendo uma operação assíncrona. Isso significa que levará algum tempo para concluir o getEventList
método (dependendo principalmente da velocidade da rede).
Então, vamos dar uma olhada na chamada http.
this.es.getEventList()
Depois de realmente fazer ("disparar") sua solicitação http, subscribe
você estará aguardando a resposta. Enquanto espera, o javascript executará as linhas abaixo deste código e se encontrar atribuições / operações síncronas, ele as executará imediatamente.
Então, depois de se inscrever no getEventList()
e esperar pela resposta,
console.log(this.myEvents);
linha será executada imediatamente. E o valor disso é undefined
antes que a resposta chegue do servidor (ou de qualquer coisa que você inicializou em primeiro lugar).
É semelhante a fazer:
ngOnInit(){
setTimeout(()=>{
this.myEvents = response;
}, 5000);
console.log(this.myEvents); //This prints undefined!
}
Solução:
Então, como podemos superar esse problema? Usaremos a função de retorno de chamada que é o subscribe
método. Porque quando os dados chegarem do servidor estarão dentro do subscribe
com a resposta.
Portanto, alterando o código para:
this.es.getEventList()
.subscribe((response)=>{
this.myEvents = response;
console.log(this.myEvents); //<-- not undefined anymore
});
irá imprimir a resposta .. depois de algum tempo.
O que você deveria fazer:
Pode haver muitas coisas a fazer com sua resposta além de apenas registrá-la; você deve fazer todas essas operações dentro do callback (dentro da subscribe
função), quando os dados chegarem.
Outra coisa a mencionar é que se você vier de um Promise
plano de fundo, o then
retorno de chamada corresponderá a subscribe
observáveis.
O que você não deve fazer:
Você não deve tentar alterar uma operação assíncrona para uma operação de sincronização (não que você possa). Um dos motivos pelos quais temos operações assíncronas é não fazer o usuário esperar a conclusão de uma operação enquanto ele pode fazer outras coisas nesse período de tempo. Suponha que uma de suas operações assíncronas leve 3 minutos para ser concluída. Se não tivéssemos as operações assíncronas, a interface congelaria por 3 minutos.
Leitura sugerida:
O crédito original para esta resposta vai para: Como retorno a resposta de uma chamada assíncrona?
Mas com o lançamento do angular2, fomos apresentados ao texto datilografado e aos observáveis, portanto, esta resposta esperançosamente cobre os fundamentos do tratamento de uma solicitação assíncrona com os observáveis.