Не удается прочитать свойство getKey неопределенного Angular2

Я пытаюсь получить 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-вызов.


person Nick Alexander    schedule 14.12.2016    source источник


Ответы (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 соглашение об именах.

person Stefan Svrkota    schedule 14.12.2016