CODEWITHSUNDEEP
htmlionic3html-selectangular6ion-select
Flutterian
Flutterian

Reputation: 1791

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

Upvotes: 1

Views: 1155

Answers (2)

Shrutika Patil
Shrutika Patil

Reputation: 565

The select component takes child ion-option components. If ion-option is not given a value attribute then it will use its text as the value. So you can solve this problem in two ways:

1.Use value:

<ion-select [(ngModel)]="gender">
 <ion-option *ngFor="let employee of employees" [value]="employee">
    {{employee}}
 </ion-option>
</ion-select>

2.Without value:

<ion-select [(ngModel)]="gender">
 <ion-option *ngFor="let employee of employees">
    {{employee}}
 </ion-option>
</ion-select>

Reference: https://ionicframework.com/docs/api/components/select/Select/

Upvotes: 1

enno.void
enno.void

Reputation: 6589

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

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

Upvotes: 2

Related Questions