无法读取未定义角度 2 的属性“获取”

Question

我正在将我的 get 转移到我的应用程序的不同 service.ts 但我得到了这个 error

这是我的代码： 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());
  }
}

旧的（clicked() 和 getScenarios()）仍然有效，但 FeatureService.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。您的解决方案对于 Beta 版本是正确的，并且不适用于当前版本。

顺便说一句，我希望这只是概念实现的证明，因为代码质量真的很低（没有可配置的端点，在组件中使用没有服务的 http，no@NgModule，错误的代码格式，不推荐使用/删除的 API，错别字）。

Answer 2

不要在组件中包含providers: [FeatureService],，也不要在@NgModule中包含它

基本上它会创建新的服务实例并破坏单例模式

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());
  }
}