CODEWITHSUNDEEP
angulartypescriptionic2ionic3
AnKr
AnKr

Reputation: 453

ion-select - on OK click the list is not displayed properly

I am implementing ion-select which is working fine the first time. When we select the drop down the second time, only previous selected values were displayed this time. Can anybody have an idea about how to fix this? 

 <div>
     <ion-select [(ngModel)]="countryList" multiple="true" (cancel)="onCancel()" (change)="onSelectChange($event)">
     <ion-option *ngFor="let country of countryList" >{{country}}</ion-option>
    </ion-select>
  </div>

The first time the drop down box showed the countries like India, SriLanka, Italy, Germany, France etc.

If I select Italy and India and click OK, automatically remaining countries were disappeared from the list. If we click next time, then only Italy and India were displayed. Remaining countries were deleted.

The above code needs any changes to fix this issue?

Upvotes: 0

Views: 54

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29614

Your countryList is set as ngModel in your select meaning a two-way binding. Once you select any values the first time, your list is mutated. You need a selectedCountries list to hold your values.

<div>
     <ion-select [(ngModel)]="selectedCountries" multiple="true" (cancel)="onCancel()" (change)="onSelectChange($event)">
     <ion-option *ngFor="let country of countryList" >{{country}}</ion-option>
    </ion-select>
  </div>

Declare the variable in ts.

selectedCountries:any;

Upvotes: 1

Related Questions