Veröffentlichen von Daten in Angular2

Question

Ich bin neu in Angular 2 und ich versuche, Daten an Web API POST. Aus irgendeinem Grund funktioniert mein POST nicht & Ich sehe das Problem nicht. Die JSON.stringify funktioniert gut ... so ist mein Problem wahrscheinlich die URL oder der Service.

Jede Hilfe wird geschätzt.

API REGLER:

[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 
} 

DATA SERVICE COMPONENT:

// 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

Zuerst müssen Sie sich vorher anmelden. Außerdem kann in der Regel die Karte Methode wie unten verwendet werden:

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

Wenn Sie auch etwas mit der Antwort möchten, können Sie tun:

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

Answer 2

Beispielcode

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() {} 

} 

Service

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()); 
} 
}