投稿データAngular2

Question

私はAngular 2が新しく、データをWeb APIにPOSTしようとしています。何らかの理由で私のPOSTが動作していない&私は問題が表示されません。 JSON.stringifyはうまく動作します...私の問題はおそらくURLまたはサービスです。

助けてください。

APIのCONTROLLER：

[Route("api/[controller]")] 
public class SamplesController : Controller 
{ 
    #region <Actions> 

    // GET: api/samples/list 
    [HttpGet("[action]")] 
    public IEnumerable<SampleData> List() 
    { 
     return UnitOfWork.Samples.AsEnumerable(); 
    } 

    [HttpPost("[action]")] 
    public void Post([FromBody]string value) 
    { 
     // Never gets here 
    } 

    #endregion 
} 

データサービスコンポーネント：

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

// MODELS 
import { SampleDataModel } from "../models/sampledata.model"; 

@Injectable() 
export class SampleDataService { 

    // CONSTRUCTORS 
    constructor(private http: Http) { } 

    // METHODS - public 
    public submit(sample: SampleDataModel) { 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 
     let url: string = 'api/samples/post'; 
     let json = JSON.stringify(sample); 

     return this.http.post(url, json, options) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 
} 

Answer 1

まず、あなたが購読する必要があります。また、通常のマップ方法は、以下のように使用することができます。

this.http.post(url, json, options) 
    .map(response => response.json) 
    .catch(error => this.handleError(error)) 
    .subscribe(); 

あなたもあなたのよう行うことができます応答で何かをしたい場合：

this.http.post(url, json, options) 
    .map(response => response.json) 
    .catch(error => this.handleError(error)) 
    .subscribe(object => console.log(object)); 

Answer 2

サンプルコード

import { Component, OnInit,ElementRef,Directive, Attribute } from '@angular/core'; 
import {SampleDataService} from '../shared/sampledataservice.service'; 

import { RouterModule, Router } from '@angular/router'; 

@Component({ 
    selector: 'your selector', 
    templateUrl: './yourfile.html', 
    styleUrls: ['./yourfile.css'] 
}) 

export class yourclass implements OnInit{ 

constructor(public fetchData:SampleDataService,private router: Router) 
{ 
this.fetchData=fetchData; 
} 
postData(myForm){  
    postMapHeader=some object; 
    this.fetchData.submit(postMapHeader).subscribe(res=>{ 
    returnMap=res; 

    }); 
} 
ngOnInit() {} 

} 

サービス

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

@Injectable() 

export class SampleDataService { 

data:any; //assign your data here 
baseUrl:string='http://your url'; 

constructor(public http:Http) { } 

submit(data){ 
let jsonData = JSON.stringify(data); 
let object = JSON.parse(jsonData); 
let headers = new Headers({ 'Content-Type': 'application/json'}); 
let options = new RequestOptions({ headers: headers }); 

return this.http.post(`${this.baseUrl}/yourapi`,object,options) 
.map(result=>result.json()); 
} 
}