Ionic-framework: ion-select: ngModel binding with the object can not work correctly in the promise.

Created on 11 Jul 2017 · 5Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I know if I want to bind a object to the ngModel property of ion-select, I need to use a input property named "compareWith". It works fine if I place the process of the model list initialization in the ionViewDidLoad event. But commonly the data comes from the Web APIs, so I use promise like this:

  ionViewDidLoad() {
    this.http.get("http://xxxxxxx.com").toPromise()
      .then(result => {
        this.setSimpleUserList();
      });
  }

Here is the html code:

    <ion-select [(ngModel)]="simpleSelectedUserList" [compareWith]="compareSimpleUser" multiple="true">
        <ion-option *ngFor="let item of simpleUserList" [value]="item">{{item.Name}} {{item.City}}</ion-option>
    </ion-select>

and the compareWith method:

  compareSimpleUser(e1: UserInfo, e2: UserInfo): boolean {
    return e1 && e2 ? e1.Name === e2.Name : e1 === e2;
  }

The items of the ion-select are rendered correctly, but no item is selected.

Expected behavior:

I think the items in the combSelectedUserList should be correctly selected. But it works wrong. If I move the setCombUserList() method out of the promise, it works fine.

Steps to reproduce:

Here are my steps to reproduce this problem:

create a model:

export class UserInfo {
    public Name: string;
    public City: string;
    constructor(name: string, city: string) {
        this.Name = name;
        this.City = city;

    }
}

the code of home page:

import { UserInfo } from './../../models/UserInfo';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from "@angular/http";
import 'rxjs/add/operator/toPromise';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public simpleUserList: Array<UserInfo>;
  public simpleSelectedUserList: Array<UserInfo>;

  public
  constructor(public navCtrl: NavController, public http: Http) {
    this.simpleUserList = new Array<UserInfo>();
    this.simpleSelectedUserList = new Array<UserInfo>();
  }


  ionViewDidLoad() {
    this.http.get("http://xxxxx.com").toPromise()
      .then(result => {
        //If this method is moved out, the ion-select works.
        this.setSimpleUserList();
      });
  }



  setSimpleUserList() {
    // mock data from the Web APIs
    this.simpleUserList.push(new UserInfo("Jim", "Beijing"));
    this.simpleUserList.push(new UserInfo("Andy", "Qingdao"));
    this.simpleUserList.push(new UserInfo("Cindy", "Shanghai"));
    this.simpleUserList.push(new UserInfo("Jack", "Guangzhou"));
    this.simpleUserList.push(new UserInfo("Tom", "Shenzhen"));
    this.simpleUserList.push(new UserInfo("Lily", "Qingdao"));
    this.simpleUserList.push(new UserInfo("Anderson", "Beijing"));

    this.simpleSelectedUserList.push(new UserInfo("Andy", "Qingdao"));
    this.simpleSelectedUserList.push(new UserInfo("Cindy", "Shanghai"));
    this.simpleSelectedUserList.push(new UserInfo("Jack", "Guangzhou"));
    this.simpleSelectedUserList.push(new UserInfo("Tom", "Shenzhen"));

  }
  compareSimpleUser(e1: UserInfo, e2: UserInfo): boolean {
    return e1 && e2 ? e1.Name === e2.Name : e1 === e2;
  }

}

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v7.10.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.2.0

Thank you very much.

Source

yanxiaodi

All 5 comments

Hello, thanks for using Ionic! Would you be able to share a minimal plunker or repo we could use to reproduce this issue?

jgw96 on 11 Jul 2017

@jgw96 Thanks for your reply! I have created a repo here:
https://github.com/yanxiaodi/Ionic-Select-Promise-Issue
Please focus on home.ts and home.html. I placed 2 ion-select on the page, and you will see the different behavior. If I place the initializing method out of a promise, it works. If the initializing method is placed in the promise, it has error.
Thanks!

yanxiaodi on 12 Jul 2017

@jgw96 Hi, could you help me? I need to solve it as soon. Thank you very much!

yanxiaodi on 18 Jul 2017

👎3

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!