조작 및 서비스 응답이되지만 정의되지 않은

Question

모델 구성 요소 :

import { Component, OnInit, AfterContentInit } from '@angular/core'; 
import { Model } from '../model'; 
import { EdmundsAPIService } from '../edmunds-api.service'; 
import { ActivatedRoute } from '@angular/router'; 
@Component({ 
    selector: 'app-models', 
    templateUrl: './models.component.html', 
    styleUrls: ['./models.component.css'] 
}) 
export class ModelsComponent implements OnInit, AfterContentInit { 
public models: Model[]; 
errorMessage: string; 

    constructor(private route: ActivatedRoute, 
       private _EdmundsAPIService: EdmundsAPIService) {} 

    getModels(): void { 
    this._EdmundsAPIService.getModels(this.route.snapshot.params[ 'data' ]) 
     .subscribe(
     models => this.models = models, 
     error => this.errorMessage = <any>error); 
    } 

    ngOnInit() { 
    this.getModels(); 
    console.log(this.models); 
    } 

EdmundsAPIService :

getModels(makeNiceName: number): Observable<Model[]> { 
    return this.http.get('REDACTED') 
    .map(res => res.json()) 
    .catch(this.handleError); 
    } 

내가 액세스 'this.models'위해 내 ngOnInit (또는 다른 라이프 사이클 후크)에에에 노력하고 있습니다 내 JSON 응답을 정렬하고 필터링하십시오. 그러나 내 console.log 반환 undefined

Answer 1

getModels(): void { 
    this._EdmundsAPIService.getModels(this.route.snapshot.params[ 'data' ]) 
     .subscribe(
      (models: Model[]) => { 
       this.models = models 

       //THIS IS WHERE YOU MANIPULATE YOUR DATA 
       console.log(this.models) // IF SERVICE IS WORKING THIS WILL NOT BE UNDEFINED 
      }, 
      (error: any) => this.errorMessage = error 
    ); 
} 

Answer 2

이 결과는 console.log 시도 할 때 비동기 호출입니다, 데이터가 아직 검색되지 않았습니다.

getModels(): void { 
    this._EdmundsAPIService.getModels(this.route.snapshot.params[ 'data' ]) 
     .subscribe(
     models => { 
     this.models = models; // values set 
     console.log(this.models); // values available! 
     }); 
    }