Selecting An Option Only Display Id Not Name In Angular 4

I am working on Angular 4 Web API Here when selecting an option it will display packingtypename its working fine. but my problem is when clicking add button it will only save the

Solution 1:

create a new variable in ts files name - PackingItem = {};

in html file change value={{item.PackingTypeID}} to [value]="item"

then in addItem() method check console.log(this.PackingItem);

Let me know if you have any doubt.

Solution 2:

Whatever is in the value for your option is what you will get on select.

Right now, you're setting it to just the ID, but you can set the value to the whole object if you want.

<option *ngFor="let item of products"id="{{item.PackingTypeID}}" [value]="item">{{item.PackingtypeName}}</option>

This will give you the whole item to play with on select instead of a single value.

Your onSelect will now look like:

onSelect(item: PackingType) {
  alert(`ID: ${item.PackingTypeID} - Name: ${item.PackingtypeName}`);
}

(Assuming your DTO is a PackingType type - I don't see any reference to the exact type you're using.. but I guess any would do. Either way, the object will be the actual item object).

Edit: added full option line, including mentioned fix for [input] of the value, and example of updated onSelect method. Don't phone and stack, peeps.