Selected value in <ion-select> element issue

Hello I want to understand something :

Case 1:

 home.ts
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public labelSelectBox;

  constructor() {
      this.labelSelectBox="Select item"
   }
}

home.html
<ion-content padding class="content">
<ion-row >
        <ion-col width-100>
          <ion-item style="background:none" no-lines>
            <ion-select   class="select" >
                <ion-option value="" selected="true">{{labelSelectBox}}</ion-option>
            </ion-select>
          </ion-item>
        </ion-col>
      </ion-row>
</ion-content>

Result:
image

image
Case 2 :

 home.html
<ion-content padding class="content">
<ion-row >
        <ion-col width-100>
          <ion-item style="background:none" no-lines>
            <ion-select   class="select" >
                <ion-option value="" selected="true">Select item</ion-option>
            </ion-select>
          </ion-item>
        </ion-col>
      </ion-row>
</ion-content>

Result :
image

image
Questions :

Why this difference ?

Similar problem here, but even less difference between the sources:

Case 1:

<ion-select [(ngModel)]="showing" interface="action-sheet" style="width: 30%;">
  <ion-option value="1">Foo</ion-option>
  <ion-option value="2" selected="true">Bar</ion-option>
  <ion-option value="3">Baz</ion-option>
  <ion-option value="4">Quux</ion-option>
</ion-select>

image


Case 2:

<ion-select [(ngModel)]="showing" interface="action-sheet" style="width: 30%;">
  <ion-option value="1">Foo</ion-option>
  <ion-option value="2" selected="true">Bar</ion-option>
  <ion-option value="3">Baz</ion-option>
  <ion-option value="'favorite'">Favorites</ion-option>
</ion-select>

image


And I just checked: changing value="‘favorite’" to value=“4” doesn’t change the display. What’s going on here?

ionChange is separate from Angular change detection. Have the ionChange of your ion-select call changeDetectorRef.detectChanges() so Angular knows to update the DOM.

@AaronSterling do you mean like this: <ion-select ... (ionChange)="changeDetectorRef.detectChanges()">?

If so, it seems to be causing my app to fail to load. And I still don’t understand why that would cause Case 1 to fail while Case 2 works…I’m not interacting with the pages in any way, that’s just how they load.

No code, no error message and no framework information gives me little to work with.

What is showing set to? In my experience, the bound backing property is important here.

@AaronSterling I’m using Ionic 2.2.0. I’m not getting any error messages, just a blank screen with a loading icon instead of the ionic favicon. Currently I’m working on a mockup, so there’s very little code in the controller. Edit: just noticed a bug in my data mocking that was causing an infinite loop, so the blank screen was unrelated to the (ionChange). Sorry for assuming it was your suggestion!

@rapropos Changing showing to match the value of the selected option worked for the foobar-ified version that I posted, but it’s not working in the real deal, where both showing and the selected value are set to { level: 1, published: true }. Edit: Could it be the object that’s messing things up? Using inspect, I see: ng-reflect-model="[object Object]"

Wouldn’t surprise me. Object equality in JavaScript is gnarly. If it’s being cloned internally, it might not compare equal.

1 Like