Значение <select><option> возвращается как String вместо Long

Question

Я сталкиваюсь со следующей ошибкой при добавлении Контакта с его адресом электронной почты и идентификатором связанной с ним Компании:

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;
}

Answer 1

Сначала спасибо тебе, @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>

Answer 2

option свойство value всегда является строкой. Попробуйте использовать [ngValue] вместо.

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

option элемент переопределяется директивой angular NgSelectOption , которая имеет вход ngValue. ngValue может быть любого типа: логическое значение, объект, целое число, строка и т. Д. *