无法读取未定义 Angular2 的属性“getKey”答案

【问题标题】：Cannot read property 'getKey' of undefined Angular2无法读取未定义 Angular2 的属性“getKey”
【发布时间】：2016-12-14 13:41:13
【问题描述】：

我正在尝试获取 json 并将其放入 Angular 2 对象中。这是我的主要课程app.component.ts：

import {Component, NgModule} from '@angular/core';
import {Http, Response} from '@angular/http';
import 'rxjs/Rx';
import {FeatureService} from "./Features.service";
import {Feature} from "./Feature";
import {Features} from "./Features";
import {Observable} from "rxjs";


@Component({
    selector: 'my-app',
    template: `<h1>Hier staat de json die we uit de test hebben gehaald</h1>
                <p>Deze json hallen we van vert.x af en kunnen we converten naar een mooie rapport.</p>
                <button (click)="clicked()">Haal test Json op</button>
                <button (click)="getFeatures()">features</button>
                <button (click)="getScenarios()">scenarios</button>
                {{leerling}}
                {{features}}
                `,
})
export class AppComponent {
  features: any;
  leerling: any;
  testfeatures : Features;
  leerlingUrl = 'http://localhost:8080/testresultaten';

  public clicked(){
    this.http.get(this.leerlingUrl).map(res => res.json())
      .subscribe(data => this.leerling = JSON.stringify(data)
        ,error => this.leerling = "error", () => console.log("Json got good"));
  }
  public getFeatures(){
    this.featureService.getFeature().subscribe(Features => {this.features = Features});
    this.testfeatures = new Features("test","test");
    //this.features = this.featureService.getFeature();
    this.leerling = this.features.getKey();

  }
  public getScenarios(){
    this.http.get('http://echo.jsontest.com/key/value/one/two').map(res => res.json()).subscribe(data => this.leerling = JSON.stringify(data),error => this.leerling = "error", () => console.log("Json got good"));
  }

  constructor(private http : Http, private featureService : FeatureService){
  }

}

这里是Features类：

export class Features {

  constructor(public one : string, public key : string){}

    public getOne():string{
      return this.one;
    }
    public getKey():string{
    return this.key;
  }
}

这里是服务：

import { Injectable } from "@angular/core";
import {Http, Response} from "@angular/http";
import {Features} from "./features";

@Injectable()
export class FeatureService {
  constructor(protected http: Http) {}


  getFeature()  {
    return this.http.get('http://echo.jsontest.com/key/value/one/two')
      .map((response: Response) => response.json())
      .map(({one,key}) => new Features(one,key));

  }

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

如果我自己创建myFeatures，我只会得到测试，但是当我尝试通过 HTTP 调用获取数据时出现错误。

【问题讨论】：

标签： json http angular angular2-http

【解决方案1】：

所有 HTTP 调用都是异步的，您尝试在 HTTP 调用完成之前访问数据。我说的是这一行：

this.leerling = this.features.getKey(); // features is not yet populated here

你需要把它放在subscribe里面：

public getFeatures(){
    this.featureService.getFeature().subscribe(res => {
        this.features = res;
        this.leerling = this.features.getKey();
    });
    this.testfeatures = new Features("test","test");
}

请注意，我将 Features 重命名为 res，因为这是 Angular 推荐的命名约定。

【讨论】：