Update ion-select data

Ionic Framework ionic-v3
1

I have a ion-select in my template:

<ion-select [(ngModel)]="model.distributor" okText="{{ 'OK'|translate }}" cancelText="{{ 'CANCEL'|translate }}">
   <ion-option *ngFor="#distributor of distributors" [value]="distributor.key" [checked]="false">{{distributor.label}}</ion-option>
</ion-select>

When I change this.distributors var in my component I have to open the ion-select twice to get the ion-select alert updated.

Is it a way to update the alert ?

2

Which version of the framework are you using, could you paste the output of ionic info?

3

This is my system information:

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
OS: Distributor ID: Fedora Description: Fedora release 23 (Twenty Three)
Node Version: v0.12.2

4

I upgrade to beta.6, still have the problem:

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
OS: Distributor ID: Fedora Description: Fedora release 23 (Twenty Three)
Node Version: v0.12.2

5

@loicfavory Did you upgraded to beta.6 following the steps in this guide because there are few required changes in addition to updating the dependencies in package.json?

6

I checked the guide and followed the steps, there is my package.json:

  "dependencies"    : {
    "angular2"        : "2.0.0-beta.15",
    "es6-promise"     : "3.0.2",
    "es6-shim"        : "^0.35.0",
    "ionic-angular"   : "2.0.0-beta.6",
    "ionic-native"    : "^1.1.1",
    "ionicons"        : "3.0.0-alpha.3",
    "ng2-translate"   : "^1.11.0",
    "reflect-metadata": "0.1.2",
    "rxjs"            : "5.0.0-beta.2",
    "zone.js"         : "^0.6.11"
  },
  "devDependencies" : {
    "del"                             : "2.2.0",
    "gulp"                            : "3.9.1",
    "gulp-watch"                      : "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.0.0",
    "ionic-gulp-fonts-copy"           : "^1.0.0",
    "ionic-gulp-html-copy"            : "^1.0.0",
    "ionic-gulp-sass-build"           : "^1.0.0",
    "ionic-gulp-scripts-copy"         : "^1.0.1",
    "run-sequence"                    : "1.1.5"
  },

Still have the problem. That’s the function I use to update my directors property:

updateDistributor(latitude, longitude) {
    this.apiConnection.get("/api/customers", {
        latitude: latitude,
        longitude: longitude
    }).map(res => res.json()).subscribe(data => {
        var loadedDistributors = [];
        data.forEach(d => {
            loadedDistributors = loadedDistributors.concat(
                [{
                    key: d['customer_code'],
                    label: d['company_name'] + ", " + d["city"]
                }]);
        });
        this.distributors = loadedDistributors;
        console.log(this.distributors);
    });

}

console.log(this.distributors) show me the updated array, but I have to open ion-select twice to get it.
I tried to fill the array with push or concat, try to init it before or not… Still have the issue.

7

@loicfavory I guess that it might be a zone-related problem (check the linked topic for details):

8

@iignatov Thank you for your help, it’s working now, even using a push function on my array.
That’s what I wrote:

import {NgZone} from 'angular2/core';

Then:

constructor(private _zone: NgZone) {

And:

updateDistributor(latitude, longitude) {
    this.apiConnection.get("/api/customers", {
        latitude: latitude,
        longitude: longitude
    }).map(res => res.json()).subscribe(data => {
        this._zone.run(() => {
            this.distributors = [];
            data.forEach(d => {
                this.distributors.push(
                    {
                        key: d['customer_code'],
                        label: d['company_name'] + ", " + d["city"]
                    });
            });
            console.log(this.distributors);
        });
    });
}
9

@loicfavory I’m glad you got it working, however I would recommend you to add a note that this is a workaround, because once the issue is fixed it should work as expected even without zone.run().

10

OK, I did it.
Thanks again