Selected value in <ion-select> element issue

Ionic Framework ionic-v3
1

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 ?

2

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

image
image714Ɨ588 19.8 KB

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

image
image714Ɨ592 22.5 KB

And I just checked: changing value=ā€œā€˜favoriteā€™ā€ to value=ā€œ4ā€ doesnā€™t change the display. Whatā€™s going on here?

3

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

4

@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.

5

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

6

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

7

@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]"

8

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

1 Like