angular2のサービスからweb api controllerを呼び出す際の問題

Question

私はクイックスタートチュートリアルをやっています。 私は、そのウェブサイトのangular2クイックスタートで指定したヒーローチュートリアルです。 それは私のためにうまく動作します。静的配列データをバインドしてCRUDを実行します。 しかし、データベースからデータを取得するためのWeb APIメソッドを呼び出す方法を学びたいと思います。

サービスのgetHeroes()メソッドでwebapiメソッドを呼び出し、このメソッドをコンポーネントのmethod-ngOnInit()のinitから呼び出していますが、このようなエラーが発生します。 私が間違っている場合は修正してください。ここで

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

そして、ここから私のコンポーネントであるangular2

EXCEPTIONに私のサービスからのWeb APIコントローラを呼び出し中

は、このエラーを得ました私はサービス方法を呼び出す場所：

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。

これが役立ちますように！