Ionic 3 ion-select

[tuxman]

Default values using ion-select multiple.

HTML:

        <ion-select multiple="true" [(ngModel)]="repeated" (ionCancel)="repeatOnCancel()" (ionChange)="repeatOnChange()">
          <ion-option value="mon">Monday</ion-option>
          <ion-option value="tue">Tuesday</ion-option>
          <ion-option value="wed">Wednesday</ion-option>
          <ion-option value="thu">Thursday</ion-option>
          <ion-option value="fri">Friday</ion-option>
          <ion-option value="sat">Saturday</ion-option>
          <ion-option value="sun">Sunday</ion-option>
        </ion-select>

typescript:

repeated:Array<string> = [];

            if(this.alarm.mon === true) { this.repeated.push("mon"); }
            if(this.alarm.tue === true) { this.repeated.push("tue"); }
            if(this.alarm.wed === true) { this.repeated.push("wed"); }
            if(this.alarm.thu === true) { this.repeated.push("thu"); }
            if(this.alarm.fri === true) { this.repeated.push("fri"); }
            if(this.alarm.sat === true) { this.repeated.push("sat"); }
            if(this.alarm.sun === true) { this.repeated.push("sun"); }

With the above code the select shows nothing also when clicked on nothing is ticked.

        <ion-select multiple="true" [(ngModel)]="repeated" (ionCancel)="repeatOnCancel()" (ionChange)="repeatOnChange()">
          <ion-option value="mon" [selected]="alarm.mon">Monday</ion-option>
          <ion-option value="tue" [selected]="alarm.tue">Tuesday</ion-option>
          <ion-option value="wed" [selected]="alarm.wed">Wednesday</ion-option>
          <ion-option value="thu" [selected]="alarm.thu">Thursday</ion-option>
          <ion-option value="fri" [selected]="alarm.fri">Friday</ion-option>
          <ion-option value="sat" [selected]="alarm.sat">Saturday</ion-option>
          <ion-option value="sun" [selected]="alarm.sun">Sunday</ion-option>
        </ion-select>

With this HTML nothing is shown in the select however the tick boxes are ticked however after I cancel they are removed.

[dotman]

What do you intend to achieve precisely? You might be doing things the wrong way

[tuxman]

I am trying to load the default values from a saved data.

So instead of this:

It shows like this:

If I force selected then then it will open like this:

However cancel will clear it.

[dotman]

If you have default values you can load them to the ion-select then iterate through with *ngFor

[tuxman]

I have a stored object containing

{
 mon: true,
 tue: false,
 wed: true
}

Like this so did not see the use for a *ngFor, are you saying I must load the data into an array and draw it like this in order for it to work?

[dotman]

Lets say something like this

days: any;

constructor() {
this.days = [
             {'short': 'mon', 'long': 'Monday'},
             {'short': 'tue','long': 'Tuesday'}
];

Then html

<ion-select>
      <ion-option value="{{item.short}} *ngFor="let item of days">{{item.long}}</ion-option>
</ion-select>

Let me know if this helps or needs further help

[tuxman]

How does this determine which data is selected and which is not? I will try using an array of objects like this but I feel it defeats the point.

[dotman]

Then there is a step more to add to this in order to get the selected option let me try and do that for you

[tuxman]

It’s fine I can do it with the *ngFor… maybe it is the way it loads the data I do not know…

[dotman]

days: any;

constructor() {
this.days = [
             {'short': 'mon', 'long': 'Monday'},
             {'short': 'tue','long': 'Tuesday'}
];
}

selectMember(data){
   console.log(data);
  }

Then html

<ion-select (ionChange)="selectMember(day)" [(ngModel)]="day">
      <ion-option value="{{item.short}} *ngFor="let item of days">{{item.long}}</ion-option>
</ion-select>

So check it now

[tuxman]

            this.repeatDays = [
              { short: "mon", long: "Monday", selected: this.alarm.mon },
              { short: "tue", long: "Tuesday", selected: this.alarm.tue },
              { short: "wed", long: "Wednesday", selected: this.alarm.wed },
              { short: "thu", long: "Thursday", selected: this.alarm.thu },
              { short: "fri", long: "Friday", selected: this.alarm.fri },
              { short: "sat", long: "Saturday", selected: this.alarm.sat },
              { short: "sun", long: "Sunday", selected: this.alarm.sun },
            ];

        <ion-select multiple="true" [(ngModel)]="repeated" (ionCancel)="repeatOnCancel()" (ionChange)="repeatOnChange()">
          <ion-option value="{{day.short}}" selected="{{day.selected}}" *ngFor="let day of repeatDays">{{day.long}}</ion-option>
        </ion-select>

Using this method “repeatOnChange” will always give me the output of “repeated” as an array of values “tue”, “wed” ect, can the original data structure “repeatDays” be update to true of false?

[dotman]

Then you have to push the whole array instead