Search code examples
htmlionic3html-selectangular6ion-select

Ionic 3 - ion-select not able to see values of select option

I am working on select option menus. I am not able to see values on drop down selection. I don't know what am I doing wrong. Please go through below code once

1. HTML

<ion-item id="fontBar" *ngIf="isAddTextSelected">
      <ion-label>Gender</ion-label>
      <ion-select [(ngModel)]="gender">
          <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
      </ion-select>
    </ion-item>

2. JS

this.employees = ["vishal", "poonam", "Asha", "Usha", "Sachin", "Rahul", "Mama", "Pravin", "Sehwag", "Rajendra", "Swara", "Ranu",
  "vishal", "poonam", "Asha", "Usha", "Sachin", "Rahul", "Mama", "Pravin", "Sehwag", "Rajendra", "Swara", "Ranu"];

I have add values to employees variable in constructor.

Note -: I already imported below in app.module.ts and even added to required ts file.

import { FormsModule } from '@angular/forms';
imports: [
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(MyApp, {
      scrollPadding: false,
      [![scrollAssist][1]][1]: true,
      autoFocusAssist: false

}),

3. Output-

enter image description here

Solution

  • You have to give option an inner value, something like this:

    <ion-option [value]="group.id">
  {{ group.name }}
</ion-option>