Угловой метод 4 столбов

Question

Я новичок в угловых 4 веб-API. Я хочу сохранить некоторые данные в базу данных, используя угловые 4 веб-API. Когда я вызываю метод GET из angular, он работает нормально, но не работает с методом POST. Я получаю 415 неподдерживаемых типов носителей. Все время, но когда я использую почтальон, метод 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 (класс):

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 (неподдерживаемый тип носителя). body: "{"Message":" Тип носителя "text/plain" объекта запроса не поддерживается для этого ресурса.","ExceptionMessage":" Нет MediaTypeFormatter, доступного для чтения объекта типа 'List`1' из содержимого с типом носителя 'text/plain'........... и т. д.

когда я использую почтальон, метод post работает нормально, потому что я меняю тип контента на application/json. Но в угловых это не работает.

Answer 1

Во-первых, вы не отправляете JSON:

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

Название довольно явно: вы создаете строку из объекта.

Во-вторых, вы не используете созданный вами заголовок. Добавь это:

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

Answer 2

Попробуйте правильно настроить WebAPI для чтения запросов JSON в ~/AppStart/WebApiConfig.cs

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