각도 2 - 정의되지 않은 속성 '...'을 읽을 수 없습니다.

Question

Angular에 새롭게 추가되었습니다. 비슷한 질문을했는데 구체적인 내용을 보거나 해결책을 이해하지 못했습니다.

실제 오류 : "속성을 판독 할 수 없음 'idPlanet'미정 여기서 updateRenderer가 같은] Object.eval (PlanetComponent.html 11)에서이"

는

문제는 : planetDetail.idPlanet은 아마 가장 정의되지 않은가?

의심 : getPlanetDetail()

planet.component.html :

<div class="col-sm-9"> 
    ID: {{ planetDetail.idPlanet }} 
</div> 

planet.component.ts :

import { 
    Component, 
    OnInit 
} from '@angular/core'; 

import { Planet }    from './planet'; 
import { PlanetService }  from './planet.service'; 

@Component({ 
    selector: 'planets', 
    templateUrl: './planet.component.html' 
}) 
export class PlanetComponent implements OnInit { 

    private planets: Planet[]; 
    private planetDetail: Planet; 
    constructor(
     private planetService: PlanetService 
    ) {} 

    public ngOnInit(): void { 
     this.getPlanetDetail(); 
     this.getPlanets(); 
    } 

    public getPlanets() { 
     this.planetService.getPlanets() 
      .subscribe(
       (planets) => this.planets = planets 
     ); 
    } 

    public getPlanetDetail() { 
     this.planetService.getPlanetDetail() 
      .subscribe(
       (planets) => this.planetDetail = planets 
     ); 
    } 

} 

planet.service.ts :

import { Injectable } from '@angular/core'; 
import { Headers, Http, Response } from '@angular/http'; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

import { Planet } from './planet'; 

@Injectable() 
export class PlanetService { 

    private planetsUrl = 'http://localhost/index.php/api/planet/'; // URL to web api 

    // Injecting the http client into the service 
    constructor(private http: Http) {} 

    public getPlanets(): Observable<Planet[]> { 
     return this.http.get(this.planetsUrl + 'planets/id_sol/1') 
      .map(this.parseData) 
      .catch(this.handleError); 
    } 

    public getPlanetDetail(): Observable<Planet> { 
     return this.http.get(this.planetsUrl + 'planet/id_planet/1') 
      .map(this.parseData) 
      .catch(this.handleError); 
    } 

    private parseData(res: Response) { 
     let body = res.json(); 

     if (body instanceof Array) { 
      return body || []; 
     } else { 
      return body.post || {}; 
     } 
    } 

    private handleError(error: any): Promise<any> { 
     console.error('An error occurred', error); // for demo purposes only 
     return Promise.reject(error.message || error); 
    } 
} 

내가 잃어버린 tbh, getPlanetDetail() 메서드를 잘 작동하는 getPlanets() 빌드하려고했습니다. 약속을 사용해야합니까?

정확히 console.log()를 디버그 할 수있는 위치를 파악하는 데 어려움을 겪고 있습니다. Github의 앵글 스타터 키트를 사용하고 있습니다.

감사합니다.

편집 1 : API를 출력 { "idPlanet": "1", "이름": "지구"}

Answer 1

가입, 다음과 같은 시도에 대한 자세한 :

public getPlanetDetail(): Observable<Planet> { 
    return this.http.get(this.planetsUrl + 'planet/id_planet/1') 
     .map(res => res.json()) 
     .catch(this.handleError); 
} 

Answer 2

요청이 언젠가 값을 서버에서 가져되지 않습니다 비동기으로 페이지가로드 될 때 따라서 planetDetail은 정의되지 않습니다. 이를 피하기 위해 add '?'를 사용할 수 있습니다. planetDetail과 idPlanet 사이. 이 값을 가지고 인쇄 경우에만이 결과 또는 오류를 인쇄하려면

ID: {{ planetDetail?.idPlanet }}

public getPlanetDetail() { this.planetService.getPlanetDetail() .subscribe( (planets) => { console.log(planets); this.planetDetail = planets }, error => {console.log(error);} ); }

Answer 3

당신의 'planetDetail'가 채워진 경우 디버깅하는 내 친구를, 단지 'CONSOLE.LOG를 추가 (planetDetail) '을 구독 방법으로 사용합니다. 아래 예를 따르십시오.

public getPlanetDetail() { 
    this.planetService.getPlanetDetail() 
     .subscribe(
      (planets) => this.planetDetail = planets 
    ); 
} 

public getPlanetDetail() { 
    this.planetService.getPlanetDetail() 
     .subscribe(
      (planets) => this.planetDetail = planets, (err) => (err),() => console.log(this.palnetDetail) 
    ); 
} 

응답이 {"idPlanet":"1","name":"Earth"}을하기 때문에) (

subscribe(function(response) { 
 
    console.log("Success Response" + response) 
 
}, 
 
    function(error) { 
 
    console.log("Error happened" + error) 
 
}, 
 
    function() { 
 
    console.log("the subscription is completed") 
 
});