Question

我正在将我的问题转移到我的应用程序的不同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

不要在providers: [FeatureService],

中包含@NgModule组件

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

Answer 2

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){
    }

 }

and service

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

Answer 3

您没有正确使用依赖注入。静态上下文中没有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组件，没有@NgModule，错误的代码格式化，弃用/删除的API，拼写错误）。

无法阅读财产＆＃39; get＆＃39;未定义的角度2

3 个答案: