在角度2中没有响应提供者甚至认为我在组件中添加了提供者?

时间:2016-06-03 11:23:40

标签: typescript angular

错误:这是我得到的错误,甚至认为我已经添加了提供程序到我的组件。我无法得到什么是我的错误。这是我的所有档案 app.component.ts,app.component.html,carservice.ts。 我无法解决。

 EXCEPTION: Error in :0:0
    ORIGINAL EXCEPTION: No provider for Response!
    ORIGINAL STACKTRACE:
    error: DI Exception
    platform-browser.umd.js:962 Error: DI Exception
        at NoProviderError.BaseException [as constructor] (core.umd.js:3776)
        at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:4307)
        at new NoProviderError (core.umd.js:4342)
        at ReflectiveInjector_._throwOrNull (core.umd.js:5794)
        at ReflectiveInjector_._getByKeyDefault (core.umd.js:5822)
        at ReflectiveInjector_._getByKey (core.umd.js:5785)
        at ReflectiveInjector_.get (core.umd.js:5594)
        at DebugAppView._View_IntegratedWorkshop_Host0.createInternal (IntegratedWorkshop_Host.template.js:29)
        at DebugAppView.AppView.create (core.umd.js:9862)
        at DebugAppView.create (core.umd.js:10054)

app.component.ts

import {Component} from '@angular/core';
import {HTTP_PROVIDERS} from '@angular/http';
import {InputText,DataTable,Button,Dialog,Column,Header,Footer,Dropdown,SelectItem} from 'primeng/primeng';

import {CarService} from './cars/carservice';

@Component({
    templateUrl: 'app/app.component.html',
    selector: 'my-app',
    directives: [InputText,DataTable,Button,Dialog,Column,Header,Footer,Dropdown],
    providers: [HTTP_PROVIDERS,CarService]
})
export class AppComponent{
  selectedCity: string;
  cars: SelectItem[];

    constructor(private carService: CarService) { 
         this.cars = [];
         this.cars.push({label: "label", value: "value"});
    }

    ngOnInit() {
        this.carService.getCarsMedium().then(cars => this.cars = cars);
    }
}

app.component.html:

<div >

   <p-dropdown [options]="cars" [(ngModel)]="selectedCity"></p-dropdown>
   <p>Selected City: {{selectedCity||'none'}}</p>

</div>

carservice.ts:

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';


@Injectable()
export class CarService {

    constructor(private http: Http) {}

    getCarsMedium() {
        return this.http.get('app/resources/data/cars-medium.json')
                    .toPromise()
                    .then(res => <Car[]> res.json().data)
                    .then(data => { return data; });
    }
}
export interface Car {
   label;
   value;
}

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
import 'rxjs/Rx';

bootstrap(AppComponent);

汽车-medium.json

{
    "data":[
       {"label":"Mercedez", "value":"Mercedez"},
       {"label":"BMW", "value":"BMW"},
       {"label":"Lam", "value":"Lam"},
       {"label":"Ista", "value":"Ista"},
       {"label":"Ferrari", "value":"Ferrari"}
    ]
}

2 个答案:

答案 0 :(得分:0)

Response取决于ResponseOptionsResponseOptions的设计方式不容易注入。见https://github.com/angular/angular/blob/bb8976608db93b9ff90a71187608a4390cbd7a07/modules/%40angular/http/src/base_response_options.ts#L57

如果您在某处注入Response,那么您可能正在做一些不应该以这种方式工作的事情。

答案 1 :(得分:0)

您不需要提供响应,它是由Http本身生成的引用。在alpha版本的早期,我遇到了同样的错误并使用这一行解决了它:constructor(@Inject(Http) http : Http)。 在CarService的构造函数中,只需添加@Inject并告诉我们它是否解决了您的问题。

carservice.ts 变为

import { Inject, Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';


@Injectable()
export class CarService {

    constructor(@Inject(Http) http : Http) {}

    getCarsMedium() {
        return this.http.get('app/resources/data/cars-medium.json')
                    .toPromise()
                    .then(res => <Car[]> res.json().data)
                    .then(data => { return data; });
    }
}
export interface Car {
   label;
   value;
}