angular 4 post 方法

Question

我是 angular 4 web api 的新手。我想使用 angular 4 web api 将一些数据保存到数据库中。当我从 angular 调用 GET 方法时，它工作正常，但不适用于 POST 方法。我收到 415 不支持的媒体类型。一直，但是当我使用 postman 时，post 方法工作正常，因为我将内容类型更改为 application/json。但是在 angular 中它不起作用......我看到很多问题都与同一个问题有关，但它们对我不起作用。在这里我添加了一些硬编码数据。

这是我的组件ts文件：

   fulldetail: Idetails[] =[];
detail: Idetails;
  onClick(value:any) {


       \hardcoded data
        this.id = 1;
       this.name= abcd;
        this.address= "abcdefgh";
        this.about= "samplestring";
        this.number= 18888;
        this.count = 12.0;

  this._Service.CatchDetail(this.id, this.name, this.address, 
this.about, this.number, this.count)
           .subscribe(detail=> {
                detail.forEach(value => {
                    this.fulldetails.push(value)
           });
        },
            error => {
                console.error(error);
                this.statusMessage = "Problem with the service.Please try again after sometime";

        });

这是我的服务 .ts 代码：

CatchDetail(id: number, name: string, address: string, 
about: string, number: number, count: number)
    : Observable<Idetails[]> {
      let data= JSON.stringify([{ id: id, name: name, address: address, about: about, nu: number, count: count }]);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this._http.post('http://localhost:1234/api/contrllername/' + 'detail', data,
        {
            params: [{ id: id, name: name, address: address, about: about, nu: number, count: count }]
        })
        .map((response: Response) => <Idetails[]>response.json())

}

这是 workdetails.ts (class):

export class Idetails {
constructor(
    public id: number,
    public name: string,
    public address: string,
    public about: string,
    public number: number,
    public count: number
  ) { }
}

这是我的控制器：

   [HttpPost]
    public void Detail([FromBody] List<spGetDetails_Result> jsonvalues)

    {


        foreach (spGetDetails_ResultDatadetail in jsonvalues)
        {
            spGetDetails_ResultDetailobject = new spGetDetails_Result();

            Detailobject.id = Datadetail.id;
            Detailobject.name= Datadetail.name;
            Detailobject.address= Datadetail.address;
            Detailobject.about= Datadetail.about;
            Detailobject.number= Datadetail.number;
            Detailobject.count = Datadetail.count;

            enqentities.spGetDetails_Result(Datadetail.id, Datadetail.name, Datadetail.address, Datadetail.about, Datadetail.number, Datadetail.count);
        }

    }


    public class spGetDetails
    {

        public int id { get; set; }
        public string name{ get; set; }
        public string address{ get; set; }
        public string about{ get; set; }
        public int number{ get; set; }
        public int count { get; set; }

    }
}

zone.js:2933 POST http://localhost:1234/api/controllername/Detail?id=1&name=abc&address=hj1hgj368&about=dfghjkl&number=31&count=3 415(Unsupported Media Type). body : "{"Message":"The request entity's media type 'text/plain' is not supported for this resource.","ExceptionMessage":"No MediaTypeFormatter is available to read an object of type 'List`1' from content with media type 'text/plain'...........etc

当我使用 postman 时，post 方法工作正常，因为我将内容类型更改为 application/json。但在 angular 中它不起作用。

Answer 1

尝试正确设置 WebAPI 以读取 ~/AppStart/WebApiConfig.cs

中的 JSON 请求

    public static void Register(HttpConfiguration config)
    {
        // ...
        var formatter = GlobalConfiguration.Configuration.Formatters.JsonFormatter;
        formatter.SerializerSettings.ContractResolver =
            new Newtonsoft.Json.Serialization.CamelCasePropertyNamesContractResolver();
        // ...
    }

Answer 2

首先，您不发送 JSON :

let data= JSON.stringify([{ id: id, name: name, address: address, about: about, nu: number, count: count }]);

名称非常明确：您正在从 object 创建字符串。

其次，您没有使用自己创建的 header。添加：

return this._http.post('http://localhost:1234/api/contrllername/' + 'detail', data,
  {
    headers: headers,
    params: [{ id: id, name: name, address: address, about: about, nu: number, count: count }]
  }).map((response: Response) => <Idetails[]>response.json())

angular 4 post 方法

angular 4 post method

angular

asp.net-web-api

angular-ui-router

angular2-services

angular4-httpclient