json - 无法读取未定义的 Angular2 的属性 'getKey'

Question

我正在尝试获取一个 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 调用获取数据时出现错误。

Answer 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 推荐的命名约定。