角2 - 未定義のプロパティ '...'を読み取ることができません

Question

角に非常に新しい。私は似たような質問をしましたが、それは具体的な内容になってしまったり、解決策を理解できません。

実際のエラー： "プロパティを読み取ることができません 'idPlanet' 未定義のObject.evalで（PlanetComponent.html：11）[updateRendererとして]"

問題： 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() { 
    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"}あるので、次のことを試してください。

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） 'を' subscribe 'メソッドに追加します。以下の例に従ってください。 ）（サブスクライブ

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