2016-09-13 2 views
0

http 호출을 할 때 들어오는 json을 구성 요소의 로컬 변수에 할당하고 뷰에 표시하려고합니다.HTTP : http 요청 후 로컬 변수가 정의되지 않음

서비스 :

getCases(){ 
    return this.http.get('someUrl') 
     .map((res: Response) => res.json()) 
} 

구성 요소 :

@Component({ 
    template: ` 
    <h1>Cases</h1> 
    <hr> 
    <br> 
    <table> 
     <tr *ngFor="let acase of cases" > 
      <td>{{acase.name}}</td> 
     </tr> 
    </table> 
    `, 
}) 

export class CaseListComponent implements OnInit { 

    //local variable, need to have use of this! 
    acase: Case; 
    cases: Case[]; 

    constructor(public _service: CaseService, public _route: ActivatedRoute) { 

    } 

    ngOnInit() { 
     this._service.getCases() 
      .subscribe(cases => this.cases = cases); 
     console.log(this.cases) // undefined!! 
    } 

    ngAfterContentInit() { 
     console.log("cases: ", this.cases) //undefined! 
    } 

} 
+0

모두 괜찮습니다. 당신이 지적한 것을 놓친 것이 있습니까? 생성자에서 public을 private로 변경하십시오. – micronyks

+0

매핑 끝 부분에 형식 지정자를 던져 볼 수도 있습니까? 다음과 같은 것 :'.map (res : Response) => res.json() as Case [])' –

+0

이걸 시도해보십시오, getCases() : Observable { this.http.get ('someUrl') ... } ' – micronyks

답변

1

당신이 지정하는 callback의 경우 콜백이 완료되기 전에 실행됩니다 CONSOLE.LOG. 그러므로 당신은 정의되지 않고 있습니다. 유사

ngOnInit() { 
     this._service.getCases() 
      .subscribe(cases => { 
      this.cases = cases; 
      console.log(this.cases) // will print values... 
      }); 
     console.log(this.cases) // undefined!! 
    } 

는 따라서 정의되지 않은 콜백 반환되기 전에 실행됩니다 ngAfterContentInit에 대한 경우입니다.

희망이 도움이됩니다!

+0

이것은 절대적으로 성공했습니다! 아래의 Alberto처럼 내가 말하고자하는 문제는 JSON 객체를 내보기에 바인딩하는 것이 었습니다. 예를 들어 초보자인데 내 문제를 올바르게 표현할 수 없습니다.) 이것이 내 문제를 해결했습니다! 고맙습니다! – Alex

0

당신은이를 사용할 수 있습니다

this.http.get('someurl').map((res: Response) => res.json()).subscribe(res => this.result = res); 

덕분에 코드가 비동기 요청의 결과에 반응하여 객체로 반환 된 JSON 직렬화 복원 기능 구독. 이제 반환 된 JSON 객체가 뷰에 바인딩됩니다.