私はクイックスタートチュートリアルをやっています。 私は、そのウェブサイトのangular2クイックスタートで指定したヒーローチュートリアルです。 それは私のためにうまく動作します。静的配列データをバインドしてCRUDを実行します。 しかし、データベースからデータを取得するためのWeb APIメソッドを呼び出す方法を学びたいと思います。angular2のサービスからweb api controllerを呼び出す際の問題
サービスの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);
}
}
使用している角度のバージョンは、HTTP用のプロバイダを追加していません。 RC5よりもgreatererが 'HttpModule'をインポートした場合。 –