Ionic 4 ion-select-option [selected] field is not working

Ionic Framework
1

Hi Ionites, would like to know the reason why selected parameter in ion-select-option is not working.

Here is the code snippet in html:

      <ion-select multiple="true" [(ngModel)]="selectedData" (ionChange)="OnChange($event)" cancelText="Cancel" okText="Submit">
        <ion-select-option *ngFor="let item of CDRS" [value]="item.id" [selected]="item.value" >
          {{ item.name }}
        </ion-select-option>
      </ion-select>

Please note that the item.value is boolean field.

From .ts file, this is the variable (CDRS) that I’m looping with.

this.CDRS = [
      {
        id : 1,
        name : "value 1",
        value : true,
      },
      ...

Anyone know how to check or select a certain ion-select-option using the selected field specially when its CDRS.value is set to true? Thanks.

2

Because you have too many cooks in your kitchen. There are two things fighting over the input binding and two things fighting over the output binding. I would either take away the () on ngModel or get rid of the ionChange handler on the output side, depending on whether you really need to run a function when the selection changes or not. On the input side, as long as [ngModel] is there, selected will have no effect. So you can get rid of the [] on ngModel, at which point selected will work, or get rid of selected and simply assign to selectedData: this.selectedData = this.CDRS.filter(cdr => cdr.value).

2 Likes
3

Hi @rapropos, yeah you’re right i need to run the function whenever the user changes his/her selections. I gonna try this solution now.

4

I removed the [(ngModel)] and it works. thanks.

5

The best opcion this use tag (ionChange)=“OnChange($event)” on TS get value
function(event:any)
{
let valueTag: event.detail.value;
console.log(valueTag);
}