400 错误请求 "错误地将值{null}转换为'System.Int32'类型。路径'id'，第1行，位置10。" POST请求

Question

我是Angular和REST API的新手。当我从Angular前端向我的API发送POST请求时，我收到了400个坏的请求响应。

HTML

<form #typeform="ngForm" (submit)="onSubmit(typeform)" autocomplete="off">
<input type="hidden" name="id" #id="ngModel" [(ngModel)]="service.typeFormData.id">
<div class="form-group">
    <label>Type</label>
    <input name="Type" #Type="ngModel" [(ngModel)]="service.typeFormData.Type" class=form-control required>
    <div class="validation-error" *ngIf="Type.invalid && Type.touched">This Field is Required</div>
</div>
<div class="form-group">
    <button type="submit" [disabled]="typeform.invalid" class="btn btn-lg btn-block">Submit</button>
</div>

服务项目

    import { Injectable } from '@angular/core';
    import { Nctype } from './nctype.model';
    import { HttpClient } from '@angular/common/http';

    @Injectable({
    providedIn: 'root'
    })
    export class NctypeService {

      typeFormData: Nctype;
      list: Nctype[];
      readonly rootURL = "https://localhost:44322/api"

      constructor(private http: HttpClient) { }

      postType(typeFormData: Nctype) {
      return this.http.post(this.rootURL+'/NCType', typeFormData);
      }

      refreshList(){
       this.http.get(this.rootURL+'/NCType')
        .toPromise().then(res => this.list = res as Nctype[]);
      }

      putType(typeFormData: Nctype) {

        return this.http.put(this.rootURL+'/NCType/'+typeFormData.id, typeFormData);
      }

      deleteType(id: number) {
        return this.http.delete(this.rootURL+'/NCType/'+id);
      }
    }

组件.ts

import { Component, OnInit } from '@angular/core';
import { NctypeService } from 'src/app/shared/nctype.service';
import { ToastrService } from 'ngx-toastr';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-nctype-create',
  templateUrl: './nctype-create.component.html',
  styleUrls: ['./nctype-create.component.css']
})
export class NctypeCreateComponent implements OnInit {

  constructor(public service: NctypeService,
    private toastr: ToastrService) { }

  ngOnInit(){
    this.resetForm();
  }

  resetForm(typeform?: NgForm) {
    if(typeform != null)
    typeform.resetForm();
    this.service.typeFormData = {
      id: null,
      Type: ''
    }
  }

  onSubmit(typeform: NgForm) {
    if(typeform.value.id == null)
    this.insertRecord(typeform);
    else
    this.updateRecord(typeform);
  }

  insertRecord(typeform: NgForm) {
    this.service.postType(typeform.value).subscribe(res => {
      this.toastr.success('Inserted Successfully', 'NC Log');
      this.resetForm(typeform);
      this.service.refreshList();
    });
  }

  updateRecord(typeform: NgForm) {
    this.service.putType(typeform.value).subscribe(res => {
      this.toastr.info('Updated Successfully', 'NC Log');
      this.resetForm(typeform);
      this.service.refreshList();
    });
  }

}

模型

export class Nctype {

    id: number;
    Type: string;

}

PUT，和DELETE都能正常工作，不知道有没有人知道我做错了什么，或者帮助我更好地理解这个错误。不知道有没有人知道我可能做错了什么，或者帮助我更好地理解这个错误。如果我注释了我的HTML的第二行，POST可以工作，但PUT的表现就像它的POST请求。 错

错误

数据记录到控制台时出错

Answer 1

来自后台的错误代码400是一个有效的错误。HTTP状态码400意味着，你的输入的一个或多个属性无效，这使得请求无效处理。让我们以下面的Model为例，为你的后台做一个例子。

 public class CuisineViewModel
    {
        public int Id { get; set; }
        [Required]
        [MinLength(5), MaxLength(25)]
        public string Name { get; set; }
        [Required]
        [MinLength(10), MaxLength(1000)]
        public string Description { get; set; }
        public bool IsActive { get; set; }
    }

其中，如果你没有为Description属性传递一个超过10个字符的字符串，那么你将从你的后台得到400错误（坏请求）。

在你的例子中，你的 "描述 "属性中的 Nctype 的模型应该有一些所需的属性集。如果您没有在您的模型的属性中传递所需的信息，您的 Nctype 模型，你会得到HTTP状态码400。

在你的服务中记录数据，看看你正在向后端传递什么。

postType(typeFormData: Nctype) {
console.log(JSON.stringify(typeFormData));
      return this.http.post(this.rootURL+'/NCType', typeFormData);
      }

你正在发送空值的字段Id，这就是为什么它扔给你400错误消息。我已经在图片中突出显示了.对于post-call，Id属性不能有值。然而，由于绑定，Id将被期望。你有两个选择来解决这个问题。

1. 当你调用Post方法时，为id属性发送0（零）。

postType(typeFormData: Nctype) {
       typeFormData.id = 0;
      return this.http.post(this.rootURL+'/NCType', typeFormData);
      }

2. 你应该使用一个单独的Model，在你的服务器端API中不应该有Id。这将帮助你在POST调用中不发送id值。