<select><option> 的值作为 String 而不是 Long 返回答案

【问题标题】：Value of <select><option> coming back as String instead of Long<select><option> 的值作为 String 而不是 Long 返回
【发布时间】：2018-12-03 11:16:17
【问题描述】：

我在添加联系人及其电子邮件和关联公司的 ID 时遇到以下错误：

2018-06-24 23:03:04.743  WARN 11360 --- [nio-8080-exec-8] .w.s.m.s.DefaultHandlerExceptionResolver : Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot construct instance of `org.vi.entities.Company` (although at least one Creator exists): no String-argument constructor/factory method to deserialize from String value ('4'); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance of `org.vi.entities.Company` (although at least one Creator exists): no String-argument constructor/factory method to deserialize from String value ('4')
     at [Source: (PushbackInputStream); line: 1, column: 138] (through reference chain: org.vi.entities.Contact["company"])

我认为选项的值发送一个字符串值而不是长值，我该如何解决这个问题？

<form class="forms-sample">
      <div class="form-group row">
        <label for="email" class="col-md-2 col-form-label">Email</label>
        <div class="col-md-10"><input type="email" class="form-control" id="email" name="email" placeholder="Email" [(ngModel)]="contact.email"></div>
      </div>
      <div class="form-group row">
        <label for="company" class="col-md-2 col-form-label">Company</label>
        <div class="col-md-10">
          <select class="form-control" id="company" name="company" [(ngModel)]="contact.company">
            <option *ngFor="let comp of companies" [value]="comp.id">{{comp.name}}</option>
          </select>
        </div>
      </div>

      <button class="btn btn-md-12 btn-outline-primary btn-fw btn-icon-text" (click)="saveContact(contact)">
        <i class="mdi mdi-file-check btn-icon-prepend"></i>
        Save
      </button>
      <button type="button" class="btn btn-md-12 btn-outline-secondary btn-fw btn-icon-text">
        <i class="mdi mdi-reload btn-icon-prepend"></i>
        Reset
      </button>
 </form>

model.contact.ts

import {Company} from './model.company';
export class Contact{
  email:string;
  phone:string;
  firstName:string;
  lastName:string;
  job:string;
  birthday:Date;
  company:Company
}

model.company.ts

export class Company{
  id:number;
  name:string;
  activity:string;
  address:string;
  city:string;
  logo:string;
}

【问题讨论】：

详情请见 the following link

标签： html typescript angular5

【解决方案1】：

option 的属性value 始终是一个字符串。尝试改用[ngValue]。

<option *ngFor="let comp of companies" [ngValue]="comp.id">{{comp.name}}</option>

option 元素被angular 的NgSelectOption directive 覆盖，它具有ngValue 输入。 ngValue 可以是任何类型：布尔值、对象、整数、字符串等...

【讨论】：

使用[ngValue]="comp.id" 后我得到同样的错误：org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot construct instance of org.vi.entities.Company (although at least one Creator exists): no int/Int-argument constructor/factory method to deserialize from Number value (1); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance of org.vi.entities.Company (although at least one Creator exists): no int/Int-argument constructor/factory method to deserialize from Number value (1)
你试过[ngValue]="comp.id"吗？不需要{{}}
Companys 构造函数期望接收的参数类型。错误说，它不应该是整数。您可以使用 POSTMAN 测试表单的提交，然后在 Angular 中应用正确的类型
更多详情请见the following link
我已经在 Chrome 中使用 ARC {"email":"root@gmail.com","phone":"632589714","firstName":"root","lastName":" root","生日":null,"job":"root", "company":{ "id":1} }

【解决方案2】：

首先提醒你@Andriy 的反应，联系期望整个公司对象，所以解决方案是：[ngValue]="comp"

<div class="form-group row">
        <label for="company" class="col-md-2 col-form-label">Company</label>
        <div class="col-md-10">
          <select class="form-control" id="company" name="company" [(ngModel)]="contact.company">
            <option *ngFor="let comp of companies" [ngValue]="comp" >{{comp.name}}</option>
          </select>
        </div>
      </div>

【讨论】：