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

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.

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

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.

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