Update/Display ion-select when property is not undefined


#1

Hello everybody,
i have to find a way to update my ion-select filling it with options coming from a property when data is arrived from a web service.

I’m doing this but it doesn’t work:

<ion-item>
  <ion-label>Data</ion-label>
 <div *ngIf="mydata != undefined">
  <ion-select [(ngModel)]="myproperty">
    <ion-option *ngfor="let item of mydata" value={{item.value}}>{{item.name}}</ion-option>
  </ion-select>
</div>
</ion-item>

mydata is the property with all the values setted after a post to a web service.
In this way i can see only the label. The strange thing is that if i put that code inside a ion-col of a grid, it works. So the gridview continues to update the values inside in automatic?
How can i fix my code without using a gridview?
(I tried also putting a flag in the component to true after mydata is setted and checking the flag on ngIf but with the same result)
Thank you all!


#2

Update:
If i write the same code without the ion-item it works, but in this way i’m loosing all the good format from it.
Can anyone explain this strange behavior?


#3

I believe you’d want the value binding to look like this:

<ion-item>
  <ion-label>Data</ion-label>
  <div *ngIf="!!mydata">
    <ion-select [(ngModel)]="myproperty">
      <ion-option *ngfor="let item of mydata" [value]="item.value">{{item.name}}</ion-option>
    </ion-select>
  </div>
</ion-item>

#4

I’m concerned about the intervening <div> element in the above suggestion. In my experience, Ionic’s theming is very unforgiving about things like that, and I would suggest rewriting it to use <ng-template> instead.


#5

This is because it’s inside the ion-item and it has its own ways of showing content. Your <div> probably would need an item-content, but that’s overkill and not good coding either. You should rather *ngIf the <ion-item> itself. Btw, use quotes around the value of value too. As also, how come your code is compiling with a *ngfor at all?

Given your backing code is working fine, this should do the trick for you:


<ion-item *ngIf="mydata != undefined">
   <ion-label>Data</ion-label>
   <ion-select [(ngModel)]="myproperty">
      <ion-option *ngFor="let item of mydata" value="{{item.value}}">{{item.name}}</ion-option>
   </ion-select>
</ion-item>