O que acontece é que o http.get
é uma chamada assíncrona, ou seja, não é garantido que ela vai retornar os resultados imediatamente, e o return
pode inclusive executar antes do get
terminar. http.get
retorna um Observable
, cujo método subscribe
serve para indicar o que fazer quando algo for retornado. Então no seu código:
this.carService.getModel(modelId).subscribe(
data => modelName = data['name']);
return modelName;
A função que está dentro do subscribe
(o código data => modelName = data['name']
, que usa a sintaxe de arrow function) é um callback: ela não executa imediatamente. Você só está dizendo: quando o http.get
retornar algo, execute isso.
Só que a chamada HTTP pode demorar, e o return
pode ser executado antes do callback. Ou seja, você pode acabar retornando o modelName
antes dele ser setado.
Mas não ficou claro para que você precisa retornar esta informação. Por que não usá-la diretamente dentro do próprio callback? Ex:
this.carService.getModel(modelId).subscribe(
data => {
// use o data['name'] diretamente aqui dentro
}
);
Ou, se precisar somente do name
, você pode usar as operações pipe
e map
, para transformar o retorno em outro Observable
:
import { map } from 'rxjs/operators';
getModel(modelId: number): Observable<string> {
return this.carService.getModel(modelId).pipe(
map(data => data['name'])
);
}
Assim, getModel
agora retorna um Observable<string>
, ou seja, contendo somente o valor de data['name']
(estou assumindo que data['name']
é uma string; caso não seja, mude o tipo de retorno do Observable
). O retorno deve continuar sendo um Observable
, pois a chamada que origina tudo (http.get
) é assíncrona, então se tentarmos retornar diretamente data['name']
, caímos no mesmo problema do código original.
Aí você usa getModel
onde precisar, lembrando que agora o retorno é o name
(e não mais o objeto data
):
this.getModel(1).subscribe(name => {
// usar o name do jeito que quiser
});