Ion-select empty with ionic v3.1

Ionic Framework ionic-v3
1

Hi everybody,
well… i spent my day to migration from v2 to v3.1… and i really want to give up ionic despite the fact the promise is great :
I want to put a “select” in my page with about 40 entries… with v2.0 everything works well.
With Ionic v3.1 the select is empty, this is my code :

<ion-select item-right [(ngModel)]="_mesure.sites_id" okText="Ok" cancelText="Annuler">
    <ion-option *ngFor="let site of _sites" value="{{site.id}}" item-right>
        {{site.libelle}}
    </ion-option>
</ion-select>

this is the result :

image
Capture d’écran 2017-04-27 à 22.51.25.png510×1178 7.36 KB

if i put this :

    <div *ngFor="let site of _sites">
        {{site.libelle}}
    </div>

instead of the select, the label is correctly displayed :

image
Capture d’écran 2017-04-27 à 22.51.31.png734×1256 57.4 KB

the _sites variables is loaded with a observable inside the component :

    private _loadAllSites() {
        this._sitesService.sites$.subscribe((sites: Array<ISites>) => {
            this._sites = sites;
        })
    }

Please someone can help me ? I’m sooo tired :frowning:

Many thanks
Regards

PS: Ionic info
Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.5
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v7.8.0
Xcode version: Xcode 8.3.2 Build version 8E2002

package.json:

    "dependencies": {
        "@agm/core": "^1.0.0-beta.0",
        "@angular/common": "4.0.2",
        "@angular/compiler": "4.0.2",
        "@angular/compiler-cli": "4.0.2",
        "@angular/core": "4.0.2",
        "@angular/forms": "4.0.2",
        "@angular/http": "4.0.2",
        "@angular/platform-browser": "4.0.2",
        "@angular/platform-browser-dynamic": "4.0.2",
        "@ionic-native/core": "^3.6.1",
        "@ionic-native/network": "^3.4.4",
        "@ionic-native/secure-storage": "^3.4.4",
        "@ionic-native/splash-screen": "3.4.2",
        "@ionic-native/status-bar": "3.4.2",
        "@ionic/cloud-angular": "^0.12.0",
        "@ionic/storage": "2.0.1",
        "angular2-jwt": "^0.1.25",
        "angular2-uuid": "^1.1.0",
        "intl": "^1.2.5",
        "ionic-angular": "3.1.0",
        "ionicons": "3.0.0",
        "lodash": "^4.17.4",
        "rxjs": "5.1.1",
        "sw-toolbox": "3.4.0",
        "zone.js": "^0.8.5"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.3.5",
        "typescript": "~2.2.1"
    },

Edit :
a “normal” select works perfectly :

    <select>
        <option *ngFor="let site of _sites" value="{{site.id}}" item-right>
            {{site.libelle}}
        </option>
    </select>

I think the ion-select and ion-option in Ionicv3 were faulty

2

Please change your topic title to something meaningful related to your problem. Thank you.

3

FWIW, the following works for me:

  fruits: string[] = [];
  fruit: string;

  constructor(public navCtrl: NavController) {
    this.loadFruits().subscribe(fruits => this.fruits = fruits);
  }

  loadFruits(): Observable<string[]> {
    return Observable.of(['apple', 'banana', 'cherry']).delay(3000);
  }

  <ion-select [(ngModel)]="fruit">
    <ion-option *ngFor="let fruit of fruits" [value]="fruit">{{fruit}}</ion-option>
  </ion-select>

The select is initially blank, then after the 3 second delay it is properly populated with the fruits.

4

Thanks for your answer…

Well, i progress…

If i clear the chrome data cache… the list appear ! :blush:

5

In your subscribe, after this._sites = sites; put a ChangeDetectorRef.detectChanges() (you need to inject ChangeDetectorRef as a service).

6

Manual change detection not required here.

7

ok some news. The same prblm as described still exists for other lists after pushing element on them.
The ionicStorage is weak. When i fix the driver of IonicStorage to websql there is no more problems.
the Indexeddb seems to be bugged ?