400 错误请求 "Error converting value {null} to type 'System.Int32'. Path 'id', line 1, position 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);
      }
    }

component.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 请求一样。错误

Error

Error with data logged to console

Answer 1

来自后端的错误代码 400 是有效错误。 HTTP 状态代码 400 表示您输入的一个或多个属性无效，这使得请求无法处理。让我们以下面的模型作为你的后端的例子

 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 将是预期的。您有两种选择来解决这个问题。

当您调用 Post 方法时，为 ID 属性发送 0（零）。

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

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

400 错误请求 "Error converting value {null} to type 'System.Int32'. Path 'id', line 1, position 10." POST 请求

400 bad request "Error converting value {null} to type 'System.Int32'. Path 'id', line 1, position 10." POST request

rest

http-status-code-400

angular