定義されていない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の内側にそれを配置する必要があります：それは角度の推奨命名規則ですので、私はresにFeaturesに改名

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

注意。