HTML:
<select [(ngModel)]='i.PaycodeId'>
<option *ngFor="let j of payCode" [value]='j.ID'>{{j.value}}</option>
</select>
payCode:
[{"ID":0,"value":"Cycle"},{"ID":1,"value":"Truck"},{"ID":2,"value":"Car"}]
In i.PaycodeId
, through ngModel
, it is setting numbers as string value not numbers like "1"/"2"
while the value passed to select is object having ID's value as number.
I want this value as number only.
Instead of using [value], use [ngValue].
<select [(ngModel)]='i.PaycodeId'>
<option *ngFor="let j of payCode" [ngValue]='j.ID'>{{j.value}}</option>
</select>
Please check out Asaf Hananel's answer below - it's what you're probably looking for.
You could separate the binding out like this:
<select [ngModel]="i.PaycodeId" (ngModelChange)="onChangeSelection($event)">
<option *ngFor="let j of payCode" [value]='j.ID'>{{j.value}}</option>
</select>
And in your Component:
onChangeSelection(selected) {
this.i.PaycodeId = parseInt(selected);
}
Working Plunker for example usage
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With