<ion-select> not showing list items on android in ionic

Ionic Framework ionic-v3
1

Haii. I am the new one to ionic. I am trying to show a list of items using ion-select tag. when I run it using
ionic lab it is showing list of items in the browser. But when I run using ionic cordova run android --prod --device , it is showing blank list. When I try to select items, nothing happens…
here is my code.

<ion-item>
    <ion-label>Country</ion-label>
    <ion-select [(ngModel)]="countryName">
      <ion-option *ngFor="let country of countriesList"  value="{{country.name}}">{{country.name}}</ion-option>
    </ion-select>
  </ion-item>

please help me. Any help would be appriciated.
Thanks in advance.

2

I don’t know if it’ll fix your issue, but
value="{{country.name}}"

should be:
[value]="country.name"

3

@SigmundFroyd Thanks for your reply. I will try with your suggestion above. If it works, i will notify u

4

Hai @SigmundFroyd , sorry for the late reply. I tried as per your suggestion above

[value]=“country.name”. It is not working. Again It is showing empty list.
Help me please any one has solution.

5

What does your controller look like?

6

@SigmundFroyd, I will show you my controller.

7

Yes, I mean the .ts file for this particular page.

The template refers to the .html file for a given page, and the controller for the .ts file that goes with that html file.

8

hai @SigmundFroyd , Why it is taking 10 minutes gap to give a reply.that’s why the late reply.
home.ts

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers:[Service]
})
export class HomePage implements OnInit {

 public countryName:any;
 countriesList:any;
  countryObj:any={
    name:'',
    capital:'',
    region:'',
    currencies:[
      {code:''}
    ],
    flag:''
  };
  // countryObj:any={};
  
  constructor(public navCtrl: NavController, private service:Service) {
    
  }

  getCountryInfo(){
    this.service.getcountries(this.countryName).subscribe(res=>{this.countryObj=res.json()[0]});
  }

  ngOnInit(){
    this.service.getcountryDetail().subscribe(res=>{this.countriesList=res.json()});
  }

}

home.html

<ion-content padding>
 <button ion-button (click)="getCountryInfo()">getCountry</button>
 <ion-item>
    <ion-label>Country</ion-label>
    <ion-select [(ngModel)]="countryName">
      <ion-option *ngFor="let country of countriesList"  value="{{country.name}}">{{country.name}}</ion-option>
    </ion-select>
  </ion-item> 
 <h5>Name:{{countryObj.name}}</h5>
 <h5>Capital:{{countryObj.capital}}</h5>
 <h5>region:{{countryObj.region}}</h5>
 <h5>currency:{{countryObj.currencies[0].code}} - {{countryObj.currencies[0].symbol}}</h5>
 <img src="{{countryObj.flag}}" width="200" height="150">
</ion-content>

service.ts

@Injectable()
export class Service{
constructor(private http:Http){}
getcountries(countryName:any){
let url:string=‘https://restcountries.eu/rest/v2/name/‘+countryName+’?fullText=true’;
return this.http.get(url);
}
getcountryDetail(){
let url:string=‘https://restcountries.eu/rest/v2/all’;
return this.http.get(url);
}
}

9

just refer this issue may be it will help you !!!

Cannot read property 'country_name' of undefined

10

@hirenkorat3, @SigmundFroyd thank you for your help. The above link helped me to solve my problem.