CODEWITHSUNDEEP
angularionic3
venkata
venkata

Reputation: 73

Issue with ion-select

<ion-select (ionChange)="changed($event)"> the changed method is being called twice for each change

Expected behavior:

the (ionChange)="changed($event) should be called once for each value change

Note: I have tried using tap, click but no use

Upvotes: 1

Views: 635

Answers (1)

Rahul A Pandiyarajan
Rahul A Pandiyarajan

Reputation: 11

I faced the same problem (used Angular 4, Ionic 3). When creating ion-select components for a single list of items, I added only the labels of the ion-option child components and let the framework decide on their value property.

I did not face this issue when I explicitly added the value property of the ion-option component.

(i.e) I changed this: selector.component.html (old)

<div>
    <ion-select [(ngModel)]="selectedItem"
                (ionChange)="change($event)">
        <ion-option *ngFor="let item of itemList">{{ item }}</ion-option>
    </ion-select>
</div>

to this: selector.component.html (now)

<div>
    <ion-select [(ngModel)]="selectedItem"
                (ionChange)="change($event)">
        <ion-option *ngFor="let item of itemList" [value]="item">{{ item }}</ion-option>
    </ion-select>
</div>

This is assuming the below is in the typescript file for this component:

public selectedItem: number = 4;
public itemList: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; // software engineers count from zero ;-)

Hope this was your case and that this helps. Cheers...

Upvotes: 1

Related Questions