<ion-select> Binding

[zauberzuckerfee]

I got a “Kompetenzbereich” in my “note”-Object and i want the ion-select to automatically select the right “Kompetenzbereich”.

  <ion-item>
    <ion-label position="stacked">Kompetenzbereich</ion-label>
    <ion-select 
      multiple="false" 
      cancelText="Cancel" 
      okText="Ok"
      [(ngModel)]="note.lntKompId"
    >
      <ion-select-option *ngFor="let komp of kompetenzbereiche" [value]="komp">
        {{ komp.komBezeichnung }}
      </ion-select-option>
    </ion-select>
  </ion-item>

[rapropos]

Can you show us the part where you assign to note.lntKompId?

[zauberzuckerfee]

  ngDoCheck() {
    this.note = this.exchange.note;
  }

The problem just appears with the <ion-select>, with for example for a string or a date, it works fine.

  <ion-item>
    <ion-label 
    position="stacked">Testdatum</ion-label>
    <ion-datetime 
      displayFormat="DD/MM/YYYY" 
      min="2015-09-01"
      [(ngModel)]="note.lntTimestamp"
      >
    </ion-datetime>
  </ion-item>

[rapropos]

@zauberzuckerfee

ngDoCheck() { this.note = this.exchange.note; }

I asked for where you assign to note.lntKompId, not note. As you seem to be on the road to discovering out, the problem likely lies with JavaScript’s crappy fake OO “support” and the difficulty of comparing objects for equality. I can’t say much further without seeing a MCVE.

[zauberzuckerfee]

@rapropos

lntKompId

this is a property of note i get from the backend. i don’t assign it explicit.

i implemented a compareWith for my ion-select, now if i click on the select, the value is selected, but not displayed from the beginning

[zauberzuckerfee]

Finally after a long time searching i found a solution on this post:

Ionic 4 ion-select pre select value

I have an ion-select that the selected value is coming from a sqlite database, meaning the value for [(ngModel)] is being populated async. In ionic v3 this would still work and would select the correct ion-option, with v4 it doesn’t. Is there any way to get this to work? <ion-select [(ngModel)]="selectedCodeValue" name="selectCode" multiple="false" (ionChange)="codeSelected()" required > <ion-select-option *ngFor="let code of availableCodes" value="{{code.id}}"> {{cod…

The selectedText Attribute in combination with a compareWith Function did solve the problem.