2016-07-29 2 views
2

Я создаю приложение в Angular2 и Spring-MVC, и когда я пытаюсь сделать запрос POST на свой сервер, я не получаю никаких признаков успеха или неудачи, но запрос не происходит, потому что Я не вижу новых данных. Когда я делаю запрос от Postman - запрос выполняется успешно, и я вижу новые данные.Angular2 HTTP POST-запрос

Angular2 код:

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class MainContentService { 
    constructor(
    private http: Http) {} 

    addNewCategory(categoryName: string) { 
    let body = JSON.stringify({ name: categoryName }); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    console.log(body); 
    console.log(options); 

    return this.http.post('http://localhost:8080/api/v1/categories', body, options) 
       .map(this.extractData) 
       .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    console.log(body); 
    return body.data || { }; 
    } 

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

Я могу видеть console.log(body) и console.log(option) печататься в консоли DEV-инструментов, но ничего более, что:

chrome devtools

запрос Почтальон:

postman request

Мой компонент:

import { Component } from '@angular/core'; 

import { MainContentService } from '../shared/main-content.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'bfy-add-category', 
    templateUrl: 'add-category.component.html', 
    styleUrls: ['add-category.component.css'], 
    providers: [MainContentService] 
}) 
export class AddCategoryComponent { 
    editName: string; 

    constructor(
    private mainContentService: MainContentService 
) { } 

    cancel() { 
    console.log('cencel'); 
    } 

    save() { 
    let categoryName = this.editName; 
    this.mainContentService.addNewCategory(categoryName); 
    } 
} 

Мой компонент HTML код:

<div class="col-sm-12 col-md-8 col-lg-9 thumbnail pull-right"> 
    <label>Category: </label> 
    <input [(ngModel)]="editName" placeholder="Category name .."/> 

    <div> 
    <button (click)="cancel()">Cancel</button> 
    <button (click)="save()">Save</button> 
    </div> 
</div> 
+0

бы вы опубликовать код вашего HTML-файла, а – rashfmnb

+0

@rashfmnb конечно. Я редактирую вопрос и добавляю код компонента (машинопись), и это html. также включают в себя данные импорта в службе. И просто, чтобы все было ясно, я не получаю ошибку в атоме или терминале при запуске приложения. Поэтому я предполагаю, что я импортирую все правильно. – Nir

+0

@peeskillet оба приложения, запущенные на моей локальной машине в настоящий момент. И если я был CORS, я предполагаю, что я получу ошибку в консоли, но консоль чиста. – Nir

ответ

8

В http.get/post/... методы ждать, пока кто-то подписывается на Observable. Он не будет делать запрос до того, как это произойдет. Это называется cold observable. Подписчики работает как что:

http.get("http://yoururl.com").subscribe(data => { ... }); 
+0

OMG, как я могу это пропустить, спасибо, сэр! – Nir

+0

Ничего, это не так, как будто я сам наткнулся на это. :) – Matt