Question

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

这是我的组件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())
        .catch(this.handleError)
}

这是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（不支持的媒体类型）。身体： “{”Message“：”此资源不支持请求实体的媒体类型'text / plain'。“，”ExceptionMessage“：”没有MediaTypeFormatter可用于从媒体内容中读取'List`1'类型的对象输入'text / plain'........... etc

Answer 1

我看到了几个问题：

您的控制器会返回void，而您的角色正在等待您的回复.map(res => res.json());
List<spGetDetails_Result>，但您有spGetDetails类。
我相信您是在发送请求时向您发送一个对象，但在您的控制器中，您期待List<T>
您要向http://localhost:1234/api/contrllername/' + 'detail发送帖子请求，您的控制器是否为contrllername？除非您设置了正确的路由，为什么/detail会点击您的操作Stock？
我也认为您不需要stringify，您只需传递Idetails对象，它就会映射到spGetDetails

Answer 2

我想你忘了把你的标题添加到请求中。

使用 httpClient 代替Http（Angular 4.3 +）：

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
};
return this.httpClient
           .post(url, data, httpOptions ) <-----
           .subscribe((response: Response) => {
               // do what you want with the response.
           });
           // you do not have to parse to JSON with httpClient!

如果您无法使用httpClient，请查看以下帖子：
https://stackoverflow.com/a/46172188/243896

Answer 3

如果您的服务类似

，则必须有效

constructor(httpClient:HttpClient){}
CatchDetail(id: number, name: string, address: string,
           about: string, number: number, count: number)
    : Observable<Idetails[]> {
      let data= [
           { 
             id: id, 
             name: name, 
             address: address, 
             about: about, 
             nu: number, 
             count: count
           }];
    return this.httpClient.post('http://localhost:1234/api/contrllername/detail'
        , data)
}

Answer 4

我今天对此表示反对，并通过简单地将Web API项目托管在IIS中而不是IIS Express中来解决了这个问题。即使Angular的请求实际上是正确的，也只是失败了OPTIONS请求返回415。

angular 4 web api post（data）方法无效415错误

4 个答案: