Question

我有来自angular tutorial的英雄应用程序，我试图让它使用REST API。 API是在DRF中构建的。我从app.module.ts删除了内存提供程序，并添加了HTTP_PROVIDERS。现在是app.module.ts文件。

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule, HTTP_PROVIDERS }     from '@angular/http';

import { AppComponent }   from './app.component';
import { routing }        from './app.routing';

import { HeroesComponent }      from './heroes.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { HeroSearchComponent } from './hero-search.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing,
    HttpModule
  ],
  declarations: [
        AppComponent,
        HeroesComponent,
        DashboardComponent,
        HeroDetailComponent,
        HeroSearchComponent,
  ],
  providers: [
    HeroService,
    HTTP_PROVIDERS,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

在hero.service.ts我改变了网址。

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

import 'rxjs/add/operator/toPromise'

import { Hero } from './hero'


@Injectable()
export class HeroService{
    private heroesUrl = 'http://127.0.0.1/api/heroes/heroes/';  // URL to web api

    constructor(private http: Http){}

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }

    private post(hero: Hero): Promise<Hero> {
        let headers = new Headers({
            'Content-Type': 'application/json'
        });

        return this.http
            .post(this.heroesUrl, JSON.stringify(hero), {headers: headers})
            .toPromise()
            .then(res => res.json().data)
            .catch(this.handleError)
    }

    private put(hero: Hero): Promise<Hero> {
        let headers = new Headers();
        headers.append('Content-Type', 'application.json');

        let url = `${this.heroesUrl}/${hero.id}`;

        return this.http
            .put(url, JSON.stringify(hero), {headers: headers})
            .toPromise()
            .then(() => hero)
            .catch(this.handleError)
    }

    delete(hero: Hero): Promise<Response> {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        let url = `${this.heroesUrl}/${hero.id}`;

        return this.http
            .delete(url, {headers: headers})
            .toPromise()
            .catch(this.handleError)
    }

    save(hero: Hero): Promise<Hero> {
        if (hero.id) {
            return this.put(hero);
        } else {
            return this.post(hero);
        }
    }

    getHeroes(): Promise<Hero[]> {
        return this.http.get(this.heroesUrl)
            .toPromise()
            .then(response => response.json().data as Hero[])
            .catch(this.handleError);
    }

    getHero(id: number): Promise<Hero> {
        return this.getHeroes().then(heroes => heroes.find(hero => hero.id === id))
    }
}

据我所知，从谷歌Chrome开发者工具我得到了django的答案，没有任何问题，但它没有显示在页面上。控制台也没有错误。

来自api请求的标题：

Request URL:http://127.0.0.1/api/heroes/heroes/
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:80
Allow:GET, POST, HEAD, OPTIONS
Connection:keep-alive
Content-Type:application/json
Date:Mon, 22 Aug 2016 11:01:39 GMT
Server:nginx/1.4.6 (Ubuntu)
Transfer-Encoding:chunked
Vary:Accept, Cookie
X-Frame-Options:SAMEORIGIN

响应：

[{"name":"noname","id":1},{"name":"noname3","id":2},{"name":"noname3","id":3},{"name":"noname2","id":4},{"name":"noname2","id":5},{"name":"noname2","id":6}]

不知道它是否重要，但这是我的nginx conf

server {

    listen 80;
    server_name team_up.org;
    charset utf-8;
    root /opt/team_up/team_up-web-client/;
    index index.html;

    location / {
       try_files $uri$args $uri$args/ $uri/ /index.html =404;
    }

}

Answer 1

从声明中删除HTTP_PROVIDERS。导入HTTP_PROVIDERS时不推荐使用HttpModule。

angular 2使用REST api

1 个答案: