CODEWITHSUNDEEP
ionic-frameworkionic4ion-select
KreLou
KreLou

Reputation: 125

Ion-select not showing on browser

I tried to create an ion-select to select one place for showing more information.

So I created the following code:

<ion-item *ngIf="foundedPlaces">
    <ion-label>Place</ion-label>
    <ion-select interface="action-sheet" [(ngModel)]="activePlace">
      <ion-select-option *ngFor="let place of foundedPlaces">{{place}}</ion-select-option>
    </ion-select>
  </ion-item>

foundedPlaces is an array of the following objects:

{placeid: number, name: string}

In the browser, I only see a small litte arrow down, but if I click it, it will not work.

I also tried to use the following code from the ionic-documentation:

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select placeholder="Select One">
      <ion-select-option value="f">Female</ion-select-option>
      <ion-select-option value="m">Male</ion-select-option>
    </ion-select>
  </ion-item>

But here is the same problem.

I hope anybody know what is wrong.

Edit:

Here is the output of my ionic show:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\KreLou\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.12.2
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Upvotes: 2

Views: 523

Answers (1)

Yazan Sadieh
Yazan Sadieh

Reputation: 39

You have to specify which element of your Object you want to show in the list.

Try it with {{place.name}}

Upvotes: 0

Related Questions