Within my Angular application, I am faced with a situation involving a <select> element that contains a list of <option> elements whose values are associated with objects.
My goal is to capture the last selected value using the following code:
<select (change)="onSelect($event)">
<option *ngFor="let option of myOptions;" [ngValue]="option"> {{ option.name }} </option>
</select>
onSelect(event: Event) {
console.log(event);
}
Therefore, my options are linked to objects (myOptions represents an array of objects).
This approach functions properly and correctly displays the {{ option.name }} string.
The challenge arises when accessing the event.target.value within my onSelect function, as it returns a string such as "1: Object", "2: Object", and so forth.
If I were to utilize [value] instead of
[ngValue]</code, a slightly different issue would arise where <code>event.target.value"[object Object]".
To combat this issue, what steps can be taken to retrieve the actual selected object option when triggering the (change) event?