Question

有一个简单的REST服务，它从数据库中返回BlogPost类型的项目列表。 api工作正常，它的Angular代码我还在生锈。我认为我的问题很简单，与将功能模块加载到根模块有关。我在加载http模块时遇到错误

错误错误：未捕获（承诺）：错误：没有Http的提供者！错误：没有Http的提供者！

API方法

   [HttpPost]
    public HttpResponseMessage GetBlogPosts(BlogSearchModel b)
    {
        HttpResponseMessage retval = new HttpResponseMessage();
        List<BlogPost> result = dmgr.GetBlogPosts(b);
        retval = Request.CreateResponse(HttpStatusCode.OK, result);
        return retval;

    }

我有一个功能模块，它使用来自服务的api 服务方式：

app.module.ts

import { HttpModule } from '@angular/http';
import { ItModule } from './itdept/itdept.module';
import { HomeModule } from './home/home.module';
import { AppComponent } from './app.component';
import { routing } from './app.routes';
//import { ItBlogService } from './itdept/itdept.blog.service'



@NgModule({
  imports: [
      BrowserModule,
      HttpModule,
      ItModule,
      HomeModule ,
      routing
  ],
  declarations: [
    AppComponent
  ],  
  bootstrap: [ AppComponent ]
})
export class MainModule { }

itdept.module.ts

import { NgModule } from "@angular/core";   
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
//import { ModelModule } from "./model/blogpost.module";
import { BlogPostComponent } from "./blog-post-detail.component";
import { ItdeptComponent } from "./itdept.component";
import { ItBlogService } from "./itdept.blog.service";

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [BlogPostComponent, ItdeptComponent],
    //exports: [BlogPostComponent, ItdeptComponent],
    providers: [ItBlogService]

})
export class ItModule {

}

itdept.blog.service.ts

import { Injectable } from '@angular/core';
import { Http,Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { BlogPost } from '../model/blogpost';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {User} from './user';



@Injectable()
export class ItBlogService {

    _baseUrl: string = '';

    constructor(private http:Http) {
        console.log('ItDeptBlogService Service created.', http);
    }


    getBlogPosts(): Observable<BlogPost[]> {
        var headers = new Headers();        
        headers.append('Content-Type', 'application/json');        
        return this.http.post("http://dlocal.test.com/api/fNet/GetBlogPosts",
            { postDate: '', bodyContent: '', Title: '' })          
            .map((res: Response) => {
                return <BlogPost[]>res.json();
            }).catch(this.handleError);
    }

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

    // update

    // new

}

然后是使用此服务的组件：

import { Component,OnInit } from '@angular/core';
import { ItBlogService } from './itdept.blog.service';
import { BlogPost } from '../model/blogpost';
import { Observable } from 'rxjs/Observable';


@Component({
    selector: 'itdept',
    templateUrl: 'app/itdept/itdept.component.html'
})
export class ItdeptComponent {

    public name: string;
    public BlogPostList: BlogPost[];

    constructor(private blogService: ItBlogService) {      

    }

    ngOnInit(): void {
        this.getBlogPosts();
    }

    getBlogPosts() {
        this.blogService.getBlogPosts()
            .subscribe(data => { this.BlogPostList  = data });        
    }
}

itdept.component.html

<div>This is the IT area</div>


<div class="row">
    <div ng2-ngFor="let b of BlogPostList" class="col-md-5">

    </div>

</div>

BlogPost类

import { IBlogPostModel } from "./interfaces";

export class BlogPost implements IBlogPostModel{

    id: number;
    title: string;
    bodyContent: string;
    tagList: string;
    dateCreated: string;
    dateUpdated: string;
    createdUser: string;
    updatedUser: string;

    constructor(values: Object = {}) 
    { 
        Object.assign(this, values);
    }
};

[ update1 - 错误明细]
如Chrome开发者控制台中所示

ERROR Error: Uncaught (in promise): Error: No provider for Http! Error: No provider for Http!
    at injectionError (reflective_errors.ts:73)
    at noProviderError (reflective_errors.ts:108)
    at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500)
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543)
    at ReflectiveInjector_._getByKey (reflective_injector.ts:404)
    at ReflectiveInjector_.get (reflective_injector.ts:349)
    at resolveNgModuleDep (ng_module.ts:101)
    at _createClass (ng_module.ts:151)
    at _createProviderInstance$1 (ng_module.ts:121)
    at resolveNgModuleDep (ng_module.ts:101)
    at injectionError (reflective_errors.ts:73)
    at noProviderError (reflective_errors.ts:108)
    at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500)
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543)
    at ReflectiveInjector_._getByKey (reflective_injector.ts:404)
    at ReflectiveInjector_.get (reflective_injector.ts:349)
    at resolveNgModuleDep (ng_module.ts:101)
    at _createClass (ng_module.ts:151)
    at _createProviderInstance$1 (ng_module.ts:121)
    at resolveNgModuleDep (ng_module.ts:101)
    at resolvePromise (zone.js:783)
    at resolvePromise (zone.js:754)
    at zone.js:831
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (ng_zone.ts:288)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1370)

[更新2 ]
奇怪的是，我刚刚开始使用Firefox的新调试会话，拉开了开发控制台并看到了与我在ItBlogService.ts中的错误处理程序相关的不同错误。错误提到Observable.throw不是一个函数，这导致我将它添加到ItBlogService.ts的顶部

import 'rxjs/add/observable/throw';

这是问题的一部分，一旦我补充说我可以看到一些其他问题。我想我现在差不多了。

Answer 1

确保在module.ts

中声明它

import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [ HttpModule ]
});

export class AppModule { }

Answer 2

在itdept.blog.service.ts

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

添加标题

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

无法让我的服务工作 - 加载

2 个答案: