Angular 10 JSON 值无法转换为 System.Int32，asp.net答案

【问题标题】：Angular 10 the JSON value could not be converted to System.Int32, asp.netAngular 10 JSON 值无法转换为 System.Int32，asp.net
【发布时间】：2020-09-02 23:42:01
【问题描述】：

我作为初学者正在学习一个有角度的 asp.net 核心教程，每次发布时都会遇到以下问题。

"The JSON value could not be converted to System.Int32. Path: $.jobType | LineNumber: 0 | BytePositionInLine: 99."

我尝试在我的服务中创建一个具有 http 内容类型的模型，如下面的“A”、“B”和“C”评论中所述，但没有成功。

这是我的服务；

  //A
  //formData: ToDoJob = new ToDoJob();

  //B
  //httpoptions = {
  //  headers: new HttpHeaders({
  //    'content-type': 'application/json'
  //  })
  //} 

  postToDoJob(formData) {
    return this.http.post(environment.apiBaseURI + '/ToDoJobs', formData);
    //C
    //return this.http.post(environment.apiBaseURI + '/ToDoJobs', JSON.stringify(formData));
  }

这是我的 ts 文件；

  toDoJobsForms: FormArray = this.fb.array([]);
  toDoTypesArray = [];


  addToDoJobForms() {
    this.toDoJobsForms.push(this.fb.group({
      jobId: [0],
      jobName: ['', Validators.required],
      jobStartDate: ['', Validators.required],
      jobEndDate: ['', Validators.required],
      jobType: [0, Validators.min(1)]
    }));
  }

  //post new record
  recordSubmit(fg: FormGroup) {
    this.toDoJobsService.postToDoJob(fg.value)
      .subscribe(
        (res: any) => { }
      );
  }

这是模型；

        [Key]
        public int JobId { get; set; }

        [Required]
        [Column(TypeName = "nvarchar(50)")]
        public string JobName { get; set; }

        [Required]
        [Column(TypeName = "date")]
        public DateTime JobStartDate { get; set; }

        [Required]
        [Column(TypeName = "date")]
        public DateTime JobEndDate { get; set; }

        [Required]
        public int JobType { get; set; }

最后是我的 html 文件；

<div class="grid-table">
  <div class="thead">
    <div class="tr">
      <div class="td">Job Name</div>
      <div class="td">Job Start Date</div>
      <div class="td">Job End Date</div>
      <div class="td">Job Type</div>
      <div class="td">Actions</div>
    </div>
  </div>
  <div class="tbody">
    <form class="tr" [formGroup]="fg" *ngFor="let fg of toDoJobsForms.controls" (submit)="recordSubmit(fg)">

      <div class="td">
        <input class="form-control" formControlName="jobName" />
      </div>

      <div class="td">
        <input type="date" class="form-control" formControlName="jobStartDate" />
      </div>

      <div class="td">
        <input type="date" class="form-control" formControlName="jobEndDate" />
      </div>

      <div class="td">
        <select class="form-control" formControlName="jobType">
          <option value="0">Select</option>
          <option *ngFor="let item of toDoTypesArray"  >{{item.typeName}}</option>
        </select>
      </div>

      <div class="td">
        <button type="submit" class="btn btn-success" [disabled]="fg.invalid"> <i class="far fa-save fa-lg"></i> Submit</button>
      </div>

    </form>
  </div>
</div>

邮递员的回答；

有谁知道我该如何解决这个问题？

【问题讨论】：

你能告诉我们正在生成的 JSON 吗？这看起来像是一个简单的 JSON 解析错误（而不是 Angular 特有的任何东西）。最可能的问题是您得到的是 JobId 的带引号的字符串值，而不是实际数字。
我已将邮递员回复添加为图片
请创建一个minimal reproducible example，这里强调最小

标签： json angular asp.net-core

【解决方案1】：

我已经通过更改 html 的某些部分解决了这个问题。关于这些答案的帮助；

Angular select value string parsing to integer

修改了html；

  <div class="td">
        <select class="form-control" formControlName="jobType">
          <option [ngValue]="0">Select</option>

          <option *ngFor="let item of toDoTypesArray" [ngValue]="item.typeId"> {{item.typeName}}</option>
        </select>
      </div>

【讨论】：