Having an issue with my ion-select in Ionic version 6. I have successfully pre-selected a value when the page loads, but it doesn't show up in the UI until after clicking the select (as shown in pic 2).
I'm loading the data in the ionViewWillEnter method and pre-selecting it with NgModel.
Here is the appearance:
Initial load of the page
After opening the select (pre-selected value visible)
HTML code for the select:
<ion-row>
<ion-col>
<ion-item lines="inset">
<ion-label hidden>Select departments</ion-label>
<ion-select (ionChange)="loadOpenTicketsForDepts()" style="min-width: 100%"
placeholder="Select departments..." multiple [(ngModel)]="selectedDepartments" cancelText="Cancel"
okText="OK">
<ion-select-option value="{{dept.id}}" *ngFor="let dept of departments">
{{dept.name}}
</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
Typescript data loading:
ionViewWillEnter(): void {
//1. get department where logged in employee is working
this.authService.getPersNr().then((res) => {
//now load department
this.ticketService.getEmployeeByName(res).subscribe(emp => {
const costcenter = emp.costcentreId;
this.costCentreService.getDepartmentById(costcenter).subscribe(dept => {
//add to selected departments if it is not already included
if (this.selectedDepartments.includes(String(dept.id)) == false) {
this.selectedDepartments.push(String(dept.id))
}
//now load tickets for all selected departments
this.loadOpenTicketsForDepts();
})
})
})
this.costCentreService.getDepartments().subscribe(res => {
this.departments = res;
})
}