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.
I don’t know if it’ll fix your issue, but
value="{{country.name}}"
should be:
[value]="country.name"
@SigmundFroyd Thanks for your reply. I will try with your suggestion above. If it works, i will notify u
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.
What does your controller look like?
@SigmundFroyd, I will show you my controller.
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.
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);
}
}
just refer this issue may be it will help you !!!
Cannot read property 'country_name' of undefined
@hirenkorat3, @SigmundFroyd thank you for your help. The above link helped me to solve my problem.