Ion-select with *ngFor directive shows selected item Twice

Ionic Framework ionic-v3
1

I’m using ion-select to show dynamic data. I’m also comparing the values to show the selected value.

my code is as follows:

<ion-item>
      <ion-label><h3>Items</h3></ion-label>
      <ion-select [(ngModel)]="editedItem">
        <ion-option *ngFor="let item of items; let i=index;" [value]="item" [selected]="item.id === selectedID"> {{ item.name }}</ion-option>
      </ion-select>
    </ion-item>

when page is loaded, it shows the selected value twice separated by comma. if we assume there is foo in items array which has id 1 and selectedID is also 1, then selected value will be shown like:
foo, foo
but if I click on ion-select , all the items are single and if I select some other item, it shows single item and works fine.
Note: This behaviour is random , sometime it works fine. but most of the time it won’t.

2

the [selected] is not needed. just set the editedItem to the value of the selected option.

1 Like