Javascript 角度2-无法读取属性''；未定义的

对我来说很新鲜。我检查了类似的问题，但他们要么深入细节，要么我就是不理解解决方案

实际错误： “无法读取Object.eval[作为UpdaterEnder]（PlanetComponent.html:11）处未定义的属性'idPlanet'”

问题： planetDetail.idPlanet很可能未定义

可疑： getPlanetDetail（）

planet.component.html：

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

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

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Headers，Http，Response}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
从“/Planet”导入{Planet}；
@可注射（）
出口级飞机服务{
私人飞机http://localhost/index.php/api/planet/“；//指向web api的URL
//将http客户端注入服务
构造函数（私有http:http）{}
public getPlanets（）：可观察{
返回此.http.get（this.planetsUrl+'planets/id\u sol/1'）
.map（此.parseData）
.接住（这个.把手错误）；
}
public getPlanetDetail（）：可观察{
返回此.http.get（this.planetsUrl+'planet/id\u planet/1'）
.map（此.parseData）
.接住（这个.把手错误）；
}
私有解析数据（res:Response）{
让body=res.json（）；
if（数组的主体实例）{
返回体| |[]；
}否则{
返回body.post |{}；
}
}
私有句柄错误（错误：任意）：承诺{
console.error（'发生错误'，error）；//仅用于演示目的
返回承诺。拒绝（error.message | | error）；
}
}

我不知所措，我试图从getPlanetDetail（）构建我的getPlanetDetail（）方法，该方法运行良好。我应该用承诺吗

我很难弄清楚我到底可以把console.log（）放在哪里进行调试。我正在使用Github的angular starter工具包

谢谢你抽出时间

---

编辑1:api输出{“idPlanet”：“1”，“name”：“Earth”}

因为请求是异步的，所以在加载页面时不会从服务器获取值，因此，planetDetail未定义。为了避免这种情况，可以在planetDetail和idPlanet之间使用add“？”。仅当它具有值时才打印

ID:{{planetDetail？.idPlanet}

如果要打印结果或错误

公共getPlanetDetail（）{
this.planetService.getPlanetDetail（）
.订阅(
（行星）=>{
控制台日志（行星）；
this.planetDetail=行星
},
error=>{console.log（error）；}
);
}

由于请求有时是异步的，因此在加载页面时不会从服务器获取值，因此，planetDetail未定义。为了避免这种情况，可以在planetDetail和idPlanet之间使用add“？”。仅当它具有值时才打印

ID:{{planetDetail？.idPlanet}

如果要打印结果或错误

公共getPlanetDetail（）{
this.planetService.getPlanetDetail（）
.订阅(
（行星）=>{
控制台日志（行星）；
this.planetDetail=行星
},
error=>{console.log（error）；}
);
}

我的朋友要调试，如果您的“planetDetail”已填充，只需在“subscribe”方法中添加“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)
      );
}

更多关于订阅（）

订阅（功能（响应）{
console.log（“成功响应”+响应）
},
函数（错误）{
日志（“发生错误”+错误）
},
函数（）{
console.log（“订阅已完成”）
}); 我的朋友要调试如果您的“planetDetail”已填充，只需在“subscribe”方法中添加“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)
      );
}

更多关于订阅（）


订阅（功能（响应）{
console.log（“成功响应”+响应）
},
函数（错误）{
日志（“发生错误”+错误）
},
函数（）{
console.log（“订阅已完成”）
}); 由于您的响应是
{“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);
}

public getPlanetDetail（）：可观察{
返回此.http.get（this.planetsUrl+'planet/id\u planet/1'）
.map（res=>res.json（））
.接住（这个.把手错误）；
}
由于您的响应是
{“Idlanet”：“1”，“name”：“Earth”}
，请尝试以下操作：

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

public getPlanetDetail（）：可观察{
返回此.http.get（this.planetsUrl+'planet/id\u planet/1'）
.map（res=>res.json（））
.接住（这个.把手错误）；
}
如果您确定
planetDetail
已在某个点（异步）填充，请尝试
ID:{{{planetDetail？.idPlanet}
检查此项：
（planets）=>this.planetDetail=planets
。很可能行星
未定义。因此，请在
parseData
方法中进行控制台操作，以查看http调用的响应。是的，我不知道还有什么可以放在那里，没有对应的内容。您能否与我们共享？@m.spyratos的内容？输出为{“Idlanet”：“1”，“name”：“Earth”}如果您确定
planetDetail
在某个点（异步）填充，尝试
ID:{{planetDetail？.idPlanet}}
检查这个：
（planets）=>this.planetDetail=planets
。很可能行星

未定义。因此，请在

parseData

方法中进行控制台操作，以查看您的http调用的响应。是的，我不知道还有什么可以放在那里，没有对应的内容。您可以与我们共享吗？@m.spyratos的内容输出为{“Idlanet”：“1”，“name”：“Earth”}是的，它是空的，它发生在我身上：）是的，它是空的，它发生在我身上：）