Wie ruft man eine Methode auf, wenn eine Combobox ausgewählt wird, die die ID weitergibt?

Question

Sagen wir, ich habe eine Adresse ---> Länderbeziehung. Das Adressformular enthält eine Combobox mit Ländern. Wenn ich ein Land auswähle, rufe ich eine Methode mit dem ausgewählten Land auf.

<select #countryCB class="form-control" id="field_country" name="country" [(ngModel)]="sponsorAgreement.country" required (change)="onChangeCountry(countryCB.value)"> 
    <option [ngValue]="countryOption.id === address.country?.id ? address.country : countryOption" 

Das Problem mit diesem Code ist, dass es den Index (das erste Land in der Liste, die zweite ...) geht nicht die ID des Landes.

Ich habe versucht, den Code zu debuggen und bemerkte, dass die ID nicht auf der Combo selbst ist, und dass es einen trackByCountryID Mechanismus gibt, den ich nicht bekomme. Dies ist, was erzeugt wird, wie Sie sehen können, keine ID:

<select class="form-control ng-untouched ng-pristine ng-valid" id="field_country" name="country" ng-reflect-name="country" ng-reflect-model="[object Object]"> 

<option value="0: null"></option> 
<option value="1: Object" ng-reflect-ng-value="[object Object]">Andorra</option> 
<option value="2: Object" ng-reflect-ng-value="[object Object]">United Arab Emirates</option> 
<option value="3: Object" ng-reflect-ng-value="[object Object]">Afghanistan</option> 

Also mit diesem:

<option [ngValue]="countryOption.id === address.country?.id ? address.country : countryOption" 

Er erzeugt den folgenden HTML-Code (mit dem Index):

<option value="2: Object" 

Aber wenn wir es zu diesem ändern:

<option [ngValue]="countryOption.id === address.country?.id ? address.country.id : countryOption.id" 

Es generiert die folgende HTML (mit ID)

<option value="1001: 1001" 

Aber dann auf der Rückseite der REST-Service-Pausen bei der Erstellung/

Bad Request: JSON parse error: Can not construct instance of io.quantixx.sponsor.domain.Country: no int/Int-argument constructor/factory method to deserialize from Number value (4); nested exception is com.fasterxml.jackson.databind.JsonMappingException: Can not construct instance of io.quantixx.sponsor.domain.Country: no int/Int-argument constructor/factory method to deserialize from Number value (4) 
at [Source: java.io.PushbackInputStream@5b2dbc6b; line: 8, column: 14] (through reference chain: io.quantixx.sponsor.domain.Address["country"]) 
2017-11-18 07:55:44.081 WARN 43780 --- [ XNIO-2 task-14] .m.m.a.ExceptionHandlerExceptionResolver : Resolved exception caused by Handler execution: org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Can not construct instance of io.quantixx.sponsor.domain.Country: no int/Int-argument constructor/factory method to deserialize from Number value (4); nested exception is com.fasterxml.jackson.databind.JsonMappingException: Can not construct instance of io.quantixx.sponsor.domain.Country: no int/Int-argument constructor/factory method to deserialize from Number value (4) 
at [Source: java.io.PushbackInputStream@5b2dbc6b; line: 8, column: 14] (through reference chain: io.quantixx.sponsor.domain.Address["country"]) 

Weiß jemand, Aktualisierung, wie die ID zu bekommen? Ist die trackByCountryID beteiligt?

Dank

Answer 1

Ich habe noch nicht herausgefunden, was die trackBy tut, aber ich brauche es nicht in meinem Anwendungsfall.

So habe ich herausgefunden, was zu tun ist, um das ausgewählte Objekt an eine Methode übergeben, wenn Sie ein Element in der Combobox auswählen. Sie müssen die ngModelChange verwenden und dann die $event übergeben. Das ausgewählte Element wird automatisch an die Methode übergeben werden:

 <select class="form-control" id="field_sponsor" name="sponsor" [(ngModel)]="sponsorAgreement.sponsor" required (ngModelChange)="onChangeSponsor($event)"> 
      <option *ngIf="!editForm.value.sponsor" [ngValue]="null" selected></option> 
      <option [ngValue]="sponsorOption.id === sponsorAgreement.sponsor?.id ? sponsorAgreement.sponsor : sponsorOption" *ngFor="let sponsorOption of sponsors; trackBy: trackSponsorById">{{sponsorOption.organisation.name}} - {{sponsorOption.sponsorLevel.name}}</option> 
     </select> 

Hier ist die onChangeSponsor Methode:

onChangeSponsor(sponsor: Sponsor): void { 
    // the sponsor parameter is set 
}