Default Selected Value of ion-select

Ionic Framework ionic-v3
#1

Hey

i have this code :

<ion-select name="languages" [(ngModel)]="userData.languages" multiple="true">
              <ion-option *ngFor="let language of languagesData" [value]="language.id + '#' + language.language" selected="selected">{{language.language}}</ion-option>
</ion-select>

i have to get language.id AND language.language in my model when i submit my form.
Values are get on my database.
How can i pre-select my options ?

Thanks’

Ion-select does not show selected option when value is an object type
#2

Then you want your option value to be language. There’s no need for frankenforming it yourself.

By assigning to your backing model property.

Complete example:

fruits = [
    {id: 1, name: 'apple'},
    {id: 2, name: 'banana'},
    {id: 3, name: 'cherry'},
    ];
selfruits = [this.fruits[1]];

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

<ion-list>
  <ion-item *ngFor="let fruit of selfruits">{{fruit.id}} - {{fruit.name}}</ion-item>
</ion-list>
1 Like
#3

I already do that but it does not work.
I get list of languages by API call.

First the list of all languages (set in var languagesData) :

Second, the list of languages spoken by the user (set in var currentLanguage) :

then my code :

 <ion-select name="languages" [(ngModel)]="currentLanguage" multiple="true">
     <ion-option *ngFor="let language of languagesData" [value]="language">{{language.language}}</ion-option>
</ion-select>

Nothing is preselect.
If i change currentLanguage by language all options are preselect.

#4

Hello,

I resolve my problem with a tricks (i’m not proud of it).
Currently i get my 2 arrays of data from api call.
If i use the base array it does not work.
But if i do someting like that :

let i = 0;
                let j = 0;

                while (i < this.currentLanguage.length) {
                  while (j < this.languagesData.length) {

                    if (this.currentLanguage[i].id == this.languagesData[j].id)
                      this.finalLanguage.push(this.languagesData[j]);
                    j += 1;
                  }
                  j = 0;
                  i += 1;
                }

It works when i use finalLanguage instead of currentLanguage.
I don’t really understand why …

#5 
$ node
> let apple = { name: 'apple' };
undefined
> let fuji = apple;
undefined
> let mcintosh = apple;
undefined
> fuji === mcintosh;
true
> let honeycrisp = { name: 'apple' };
undefined
> honeycrisp === apple;
false
> fuji === apple;
true
> mcintosh === apple;
true
> honeycrisp === fuji;
false
#6

Hum ok but can you explain me why honeycrisp === apple is false ?

Furthermore do you have a best way to create my “finalLanguage” ?

1 Like
#7

Because JavaScript is a poorly-designed language.

2 Likes
#8

How can i pass the ref of an array to transform this :

let i = 0;
     let j = 0;
     this.finalSkill = [];

     while (i < this.currentSkill.length) {
       while (j < this.skillsData.length) {
         if (this.currentSkill[i].id == this.skillsData[j].id)
            this.finalSkill.push(this.skillsData[j]);
         j += 1;
       }
j = 0;
i += 1;

to this :

this.finalSkill = [];
this.help.GetArray(this.currentSkill, this.skillsData, this.finalSkill);

/* **** */

GetArray(arr1, arr2, res){
    let i = 0;
    let j = 0;

    while (i < arr1.length) {
      while (j < arr2.length) {
        if (arr2[i].id == arr1[j].id)
          res.push(arr2[j]);
        j += 1;
      }
      j = 0;
      i += 1;
    }
  }

I want to use extern function to avoid having 4684654 lines in one controller. And several time the same code.

#9

For anybody looking at this, I would recommend using the compareWith method as instructed by ionic documentation