How to use object in ion-select box to display dynamic ion-option in my ionic 3 app?

Question

In my ionic 3 application, i want to add a dynamic select-option of different country. I have an object of country like:

{AF: "Afghanistan", AX: "Aland Islands", AL: "Albania", DZ: "Algeria"}

I want to use this object like:

    <ion-select [(ngModel)]="country" interface="action-sheet">
 <ion-option value='AF'>Afghanistan</ion-option> 
 <ion-option value='AX'>Aland Islands</ion-option> 
 <ion-option value='AL'>Albania</ion-option> 
 <ion-option value='DZ'>Algeria</ion-option> 
</ion-select>

how can i do this

Answer 1

NgFor is used in situations like this but it needs an array instead of an object. However, you can use it like this:

<ion-select [(ngModel)]="country" interface="action-sheet">
   <ion-option *ngFor="let key of Object.keys(countriesObj)" value={{key}}>{{countriesObj[key]}}</ion-option>
</ion-select>

---

EDIT:

You'll also have to declare a variable Object in your controller for this to work:

private Object: Object = Object;