Select item in ionic 2

Ionic Framework ionic-v3
1

hi, I have code:

<ion-item>
          <ion-label stacked>{{'City' | translate}}</ion-label>
          <ion-select [(ngModel)]="dataProvince" name="province"  *ngFor="let p of dataProvince">
            <ion-option value="{{p.provinceid}}">{{p.name}}</ion-option>
          </ion-select>
</ion-item>

but, It’s not work, I think so *ngFor = “let p of dataProvince”, Where do I put it?

2

@healer12 i think you are doing it wrong.You have to loop the ion-option.
*ngFor inside ion-option tag

<ion-item>
          <ion-label stacked>{{'City' | translate}}</ion-label>
          <ion-select [(ngModel)]="dataProvince" name="province">
            <ion-option *ngFor="let p of dataProvince" value="{{p.provinceid}}">{{p.name}}</ion-option>
          </ion-select>
</ion-item>
1 Like
3

Hey @healer12, You have to write code for looping with in the tag of that element which you want to plot multiple times or on which you want loop to work. In your case, if you want to have multiple options in ion-select then you have to loop the ion-option tag. Do it like this:

<ion-item>
          <ion-label stacked>{{'City' | translate}}</ion-label>
          <ion-select [(ngModel)]="dataProvince" name="province">
            <ion-option  *ngFor="let p of dataProvince" value="{{p.provinceid}}">{{p.name}}</ion-option>
          </ion-select>
</ion-item>

I hope this will help you. Let me know if you face any issue.
Cheers!!!

4

maybe problem has been resolved, but I can’t get data with {{p.provinceid}} and{{p.name}}.…this is my data, It’s saved localStorage:

{success: true,…}
data{
district
[{districtid: "001", provinceid: "01", name: "Ba Đình"},…]
province
[{provinceid: "01", name: "Hà Nội"}, {provinceid: "02", name: "Hà Giang"},…]
{provinceid: "01", name: "Hà Nội"}
{provinceid: "02", name: "Hà Giang"}
{provinceid: "04", name: "Cao Bằng"}
{provinceid: "06", name: "Bắc Kạn"}
{provinceid: "08", name: "Tuyên Quang"}
{provinceid: "10", name: " Lào Cai"}
{provinceid: "11", name: " Điện Biên"}
{provinceid: "12", name: "Lai Châu"}
{provinceid: "14", name: "Sơn La"}
{provinceid: "15", name: "Yên Bái"}
{provinceid: "17", name: "Hòa Bình"}
}
success true

this is TS file

  province = window.localStorage.getItem('city');
  ionViewDidLoad() {
    this.loadingprovider.showLoader(this);
    let  province = JSON.parse(this.province);
    let dataPro  = province.data.province;
    console.log(dataPro);
    this.profileService.load().subscribe(data => {
      if(data.success==true){
        this.profile = data.data;
        console.log(data);
        this.loading.dismiss();
      }
  },(err)=>{
    this.loading.dismiss();
    })
  }

let  province = JSON.parse(this.province);
    let dataPro  = province.data.province;
    console.log(dataPro);

HTML file

<ion-item>
          <ion-label stacked>{{'City' | translate}}</ion-label>
          <ion-select [(ngModel)]="dataProvince" name="province">
            <ion-option  *ngFor="let p of dataPro" value="{{p.provinceid}}">{{p.name}}</ion-option>
          </ion-select>
</ion-item>

I can show data with console.log with province array, but I can’t get data from province array, can you help me??

Thanks for the suggestion above <3

5

You’re welcome bro.
It’d help a lot if you show some data displayed on console.log()

1 Like
6

image
image.png939×543 14.2 KB

This is data when console.log().

8

I solved the problem by this.dataPro = province.data.province; and dataPro: any =[]
It’s work for me. Thank you bro

1 Like
9

That’s great. I was gonna suggest you the exactly same thing because i am not sure that you can access your variables Defined by “let” in your html file. Always define variables right after you start your class’ code/definition.
Cheers!!!