<ion-select> with *ngFor

Ionic Framework ionic-v3
1

I have a simple ion-select with 2 strings that I want to show as options

strings:Array<string>;
selected:string;

constructor(){
    this.strings = new Array<string>();
    this.strings.push('a');
    this.strings.push('b');
}

and the html

<ion-select placeholder="Select" [(ngModel)]="selected">
    <ion-option *ngFor="let item of strings" value="item">{{item}}</ion-option>
</ion-select>

The options are correctly shown but when I select an option and confirm it selects all the other options as well. Why is it happening?

4 Likes
2

Hello!

Because you’re neither using property binding on value nor string interpolation when adding item as value
Therefore both of your options will get “item” as there value

do it like this:

<ion-select placeholder="Select" [(ngModel)]="selected">
    <ion-option *ngFor="let item of strings" value="{{item}}">{{item}}</ion-option>
</ion-select>`

or

<ion-select placeholder="Select" [(ngModel)]="selected">
    <ion-option *ngFor="let item of strings" [value]="item">{{item}}</ion-option>
</ion-select>`
3

That’s it! Silly mistake of my part :sweat:
Thank you so much!!!

4

just change your html from

value="item"

to

value="{{item}}"
5

Also, to be able to have others read you code easily, never use Hungarian notation.

strings:Array<string>;

Always make your variables meaningful. In the case that you can’t, make them generic; just never name a var “strings”, “myArray”, “myList”, “tuples”, “numbers”, etc.

6

Yeah, thanks for the tip.
I just did it to post the code :grin:

1 Like
7

Hi,

I tried this example, but it seems that ngFor isn’t available for tag anymore?

regards
Meex

8

Hello! Saved my day…

9

Thanks a lot … example code worked for me…

10

Can anyone help in this?