Angular 2 - 无法读取未定义的属性'...'

Question

Angular很新颖。我检查了类似的问题，但他们要么深入细节，要么只是不理解解决方案。

实际的错误： “无法读取属性 'idPlanet' 的未定义在Object.eval [如updateRenderer（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，我试图从getPlanets（）生成我的getPlanetDetail（）方法，它工作正常。我应该使用承诺吗？

我很难搞清楚我可以把console.log（）调试到什么地方。我正在使用Github的角度初学者套件。

谢谢你的时间。

编辑1：API输出{“idPlanet”：“1”，“名称”：“地球”}

Answer 1

因为你的反应是{"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'方法中。按照下面的例子。

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) 
    ); 
} 

更多关于认购（）

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