從angular2服務中調用web api控制器的問題

Question

我正在做角度快速入門教程。 所以我只是Hero教程，在其網站上的angular2 quickstart中指定。 對我來說運行良好。它綁定靜態數組數據並執行CRUD。 但現在我想學習如何調用Web API方法從數據庫獲取數據。

因此，我打電話給012ap服務方法中的webapi方法，並從組件的初始化method-ngOnInit()調用該方法，但它給出了這樣的錯誤。 如果我錯了，請糾正。

得到這個錯誤，而從我的服務angular2

異常調用的Web API控制器：

Error: Uncaught (in promise): No provider for Http! (DashboardComponent -> HeroService -> Http)BrowserDomAdapter.logError @ angular2.dev.js:23925 
angular2.dev.js:23925 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23925 
angular2.dev.js:23925 Error: Uncaught (in promise): No provider for Http! (DashboardComponent -> HeroService -> Http) 
    at resolvePromise (angular2-polyfills.js:602) 
    at angular2-polyfills.js:579 
    at ZoneDelegate.invoke (angular2-polyfills.js:390) 
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (angular2.dev.js:2126) 
    at ZoneDelegate.invoke (angular2-polyfills.js:389) 
    at Zone.run (angular2-polyfills.js:283) 
    at angular2-polyfills.js:635 
    at ZoneDelegate.invokeTask (angular2-polyfills.js:423) 
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.dev.js:2118) 
    at ZoneDelegate.invokeTask (angular2-polyfills.js:422)BrowserDomAdapter.logError @ angular2.dev.js:23925 
angular2-polyfills.js:528 Unhandled Promise rejection: No provider for Http! (DashboardComponent -> HeroService -> Http) ; Zone: angular ; Task: Promise.then ; Value: NoProviderErrorconsoleError @ angular2-polyfills.js:528 
angular2-polyfills.js:530 Error: Uncaught (in promise): No provider for Http! (DashboardComponent -> HeroService -> Http)(…)consoleError @ angular2-polyfills.js:530 

這裏是我的英雄服務：

import {Injectable} from 'angular2/core'; 
    import {Http,Response,Headers} from 'angular2/http'; 
    import 'rxjs/add/operator/map' 
    import {Observable} from 'rxjs/Observable'; 
    import {Hero} from '/Scripts/FirstEx_Ts/Hero.ts'; 
    import {HEROES} from '/Scripts/FirstEx_Ts/MockHeros.ts'; 


    @Injectable() 
    export class HeroService { 



    private headers: Headers; 

    constructor(private _http:Http) { 
    } 

getHeroes(){ 

    return  this._http.get("http://localhost:54046/api/Heromanage/GetAllHeroes") 
     .map((response: Response) => <Hero[]>response.json()) 
     .catch(this.handleError); 
} 
getHeroesSlowly() { 
    return new Promise<Hero[]>(resolve => 
     setTimeout(() => resolve(HEROES), 2000) // 2 seconds 
     ); 
} 

getHero(id: number) { 
    return Promise.resolve(HEROES).then(
     heroes => heroes.filter(hero => hero.id === id)[0] 
     ); 
} 

    private handleError(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json().error || 'Server error'); 
} 
} 

這裏是從我的組件我打電話給我的服務方法：

import {Component, OnInit} from 'angular2/core'; 
import {Http,Response,Headers} from 'angular2/http'; 
import { CORE_DIRECTIVES } from 'angular2/common'; 
import {Router} from 'angular2/router'; 
import {Hero} from '/Scripts/FirstEx_Ts/Hero.ts'; 
import {HeroService} from '/Scripts/FirstEx_Ts/HeroService.ts'; 

@Component({ 
selector: 'my-dashboard', 
providers: [HeroService], 
templateUrl: '/Templates/DashboardComponent.html', 
directives: [CORE_DIRECTIVES], 
styles: [ ` 
[class*='col-'] { 
float: left; 
} 
*, *:after, *:before { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
h3 { 
text-align: center; margin-bottom: 0; 
} 
[class*='col-'] { 
padding-right: 20px; 
padding-bottom: 20px; 
} 
    [class*='col-']:last-of-type { 
    padding-right: 0; 
    } 
    .grid { 
    margin: 0; 
    } 
    .col-1-4 { 
    width: 25%; 
    } 
    .module { 
    padding: 20px; 
    text-align: center; 
    color: #eee; 
    max-height: 120px; 
    min-width: 120px; 
    background-color: #607D8B; 
    border-radius: 2px; 
    } 
h4 { 
    position: relative; 
    } 
    .module:hover { 
    background-color: #EEE; 
    cursor: pointer; 
     color: #607d8b; 
    } 
.grid-pad { 
    padding: 10px 0; 
    } 
    .grid-pad > [class*='col-']:last-of-type { 
    padding-right: 20px; 
    } 
@media (max-width: 600px) { 
.module { 
    font-size: 10px; 
    max-height: 75px; } 
    } 
    @media (max-width: 1024px) { 
    .grid { 
    margin: 0; 
    } 
    .module { 
    min-width: 60px; 
    } 
    } 
`] 
    }) 
export class DashboardComponent implements OnInit { 
heroes: Hero[] = []; 
constructor(
    private _router: Router, 
    private _heroService: HeroService) { 
debugger; 

} 
**ngOnInit() { 
    alert('hi'); 
    debugger; 
    this._heroService 
     .getHeroes() 
     .subscribe((heroes:Hero[]) => this.heroes = data, 
      error => console.log(error), 
      () => console.log('Get all Items complete')); 
}** 
gotoDetail(hero: Hero) { 
    let link = ['HeroDetail', { id: hero.id }]; 
    this._router.navigate(link); 
    } 

    } 

Answer 1

，你可以嘗試以下，

角版本< RC5

包括組件元數據的供應商陣列HTTP_PROVIDERS。

角版本> = RC5

進口HttpModule在含有您的組件模塊。

希望這有助於！