2016-08-01 2 views
1

데이터베이스에서 데이터를 반환하는 서비스가 있습니다.angular 2 템플릿에서 반환 된 json에 액세스하는 방법

this._route.params 
    .map(params => params['id']) 
    .subscribe((id) => { 
    this.title = id ? "Edit User" : "New User"; 
    if (!id) { 
     return; 
    } 
    //console.log(id); 
    this._locationService.getLocation(id) 
     .subscribe(
      location => this.location = location, 
      error => alert(error), 
     () => console.log("finished" ) 
     ); 
    }); 

및 템플릿에 내가 그렇게 같은 결과를 참조하십시오 :

Location - {{location | json}} 

하고 내가 보는 결과가를하는 OnInit에서 난 결과 서비스를 호출하고 그것을 매개 변수를 전달하고 돌아 : 위치 - [{ "id": "1", "이름": "shliz 커피", "주소": "hel st 36, TA", "lat": "32.060143", "lng": "34.770557" }]

모두 좋아요. 잘 때 내가 시도 : {{location.name}}

내가이 오류를 얻을 : 예외 : 형식 오류 : 내가 데이터에 액세스 할 수없는 이유 정의되지 않은

의 특성 '이름을'읽을 수 없습니다를?

만약 내가 어떻게 연결되었는지 모르겠지만 내가 생성기 this.location this.location 내가 oninit 내가이 개체를 얻을 때 정의되지 얻을 로그. 누구든지 잘못된 점을 알고 있습니까?

location:Location = { 
    name: 'some name', 
    address: 'some addredd', 
    lat: '45.74837', 
    lng: '32.98575' 
}; 

을하고 시도하고, 여전히 템플릿에 액세스 할 수 없습니다 : 그래서 그냥 테스트

, 난 위치 변수과 같이 초기화합니다. 그래서 나는 서비스와 데이터베이스를 호출하는 oninit 부분을 주석 처리했다. 그런 다음 초기화 된 값에 액세스한다.

하지만 완전한 가입 메소드에서 this.location을 기록하고 있기 때문에 bizzare이며 json pipe를 사용할 때 템플릿에서 알 수 있듯이 표시됩니다.

내가
+1

JSON을 다시보십시오. 전역 변수를 결과로 설정하고 콘솔 ('window [ 'test'] = location')에서 그 변수를 가지고 놀거나 설정중인 실제 값을 조사하기 위해 중단 점을 설정하십시오. 콘솔에서'typeof test'를 확인하십시오. 'location.name'이 절대로 정의되지 않는 이유를 알아야합니다. 또한 @micronyks에서 답을 확인하십시오. 비동기 작업이 반환되기 전에 각도 2가 정의되지 않은 변수의 속성에 바인딩하려고 시도하는 것에 대해 침묵하지 않습니다. –

답변

2

다음과 같이 당신이 Elvis operator (?.)을 사용할 수 있습니다

을 잃었어요

,

{{location?.name}} 

오류의 이유는 당신이 async 호출을 사용하여보기에 도착하기 전에 데이터를 표시 할 것이다.

작은 설명을 읽으십시오. http://www.syntaxsuccess.com/viewarticle/elvis-operator-in-angular-2.0

+0

엘비스 연산자를 사용하면 오류가 표시되지만 변경 사항은 표시되지 않습니다. 내가 구독하는 경우 : () => console.log (typeof this.location) 내가 얻을 : 객체 – Ron

+0

이것은 확실히 작동합니다. '.subscribe ((data) => {this.location = data; console.log (this.location);}, error ....); ' – micronyks

+0

다시 콘솔에 객체를 넣습니다. 모든 것이 올바르게 내부에있다. 하지만 템플릿에 {{location.name}}이 있습니다. XCEPTION : TypeError : 정의되지 않은 'name'속성을 읽을 수 없습니다. – Ron

관련 문제