1

I'm working in an angular project,the project was made using Jhipster version 6.9. I want to get the value or index when the user select an option from the list.

<select  id="field_entidad"  name="entidad" formControlName="entidad" 
         (change)="detalle($event.target.value)">
         <option
         *ngFor="let entidadOption of entidads; trackBy: trackById; let i = index">
              {{ entidadOption.sigla }}
          </option>
</select>

The change method work fine as is showed in Get current value when change select option - Angular2, however in my .ts component when I try to get the value from my .html I have this: https://i.stack.imgur.com/r3S5a.png

This is the function that get the value in my .ts

detalle(event:any) :void {
console.log(event);
}

I want to get the number value which is shown in the picture which is in fact the index, but I have spend hours and I could not get this attribute I have search some thing like How to access the first property of a Javascript object? and I would to know what mean this in JS. "1: Object"

Thanks a lot, P.S this is my first question

Juan Esteban Katz Delgado
  • 11
  • 1
  • 5

1 Answers1

1

You are loading the whole object entidadOption on each option's value. If you want just the index you could try something like this:

<select  id="field_entidad"  name="entidad" formControlName="entidad" 
         (change)="detalle($event.target.value)">
         <option [value]="entidadOption.id"
         *ngFor="let entidadOption of entidads; trackBy: trackById; let i = index">
              {{ entidadOption.sigla }}
          </option>
</select>

And:

detalle(entidadId:any) :void {
     console.log(entidadId);
}

I'm guessing the id field is what you want.

vicpermir
  • 3,544
  • 3
  • 22
  • 34