は、私は自分のアプリケーションのために異なるservice.tsに私の取得者を動かしていますが、私はここでは、この <a href="https://i.stack.imgur.com/ZNaoF.png" rel="nofollow noreferrer">error</a></p> <p>を得る2

Question

未定義の角度の「取得」プロパティを読み取ることができません。私のコードです： AppComponent.ts

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


@Component({ 
    selector: 'my-app', 
    providers: [FeatureService], 
    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}} 

       `, 
}) 
export class AppComponent { 
    titel = ""; 
    leerling: any; 
    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.leerling = FeatureService.getFeature(); 
    } 
    public getScenarios(){ 
    this.http.get('http://localhost:8080/features/1/scenarios').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){ 
} 

} 

そして、ここで私のFeature.service.ts

import {Http} from "@angular/http"; 

export class FeatureService{ 
    private static http : Http; 


    static getFeature(){ 
    return this.http.get('http://localhost:8080/features') 
     .map(data => data.toString()); 
    } 
} 

古いもの（（クリック）とgetScenarios（））はまだ動作しますがフィーチャリングでありますureService.getFeatureは（）

Answer 1

依存性注入を正しく使用していません。静的コンテキストではthisはありません。

import { Injectable } from "@angular/core"; 
import { Http } from "@angular/http"; 

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


    getFeature(){ // note: no "static" here. This is instance method. Service will be singleton anyway. 
    return this.http.get('http://localhost:8080/features') 
     .map(data => data.toString()); 
    } 
} 

プロバイダ宣言を@NgModuleに書き換える必要があります。あなたのソリューションはベータ版には正しかったし、現在のバージョンでは動作しません。

私は、コード品質が本当に低い（構成可能なエンドポイントなし、コンポーネントでサービスなしのhttpを使用していない、@NgModule、悪いコードの書式設定、推奨されていない/削除されたAPI、タイプミスなど）この？：@NgModuleよう

Answer 2

いずれかの成分でproviders: [FeatureService],が含ま@NgModule

でそれをincluldeていない基本的にはサービスと破滅シングルトンパターン

Answer 3

export class AppComponent { 
    titel = ""; 
    leerling: any; 
    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.leerling = this.featureService.getFeature(); 
    } 
    public getScenarios(){ 
    this.http.get('http://localhost:8080/features/1/scenarios').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){ 
    } 

} 

とサービス

のクレート新しいインスタンス意志を動作しません。

import {Http} from "@angular/http"; 
@Injectable() 
export class FeatureService{ 
    private static http : Http; 


    getFeature(){ 
    return this.http.get('http://localhost:8080/features') 
     .map(data => data.toString()); 
    } 
}