I just created an ion-select in ionic version 6. My problem is that i have successfully pre selected a value when the page loads, but this pre select value does not get shown in the UI?!
It just appears after I have clicked the select, but before it does not appear (as you can see on pic 2). I load the data in the ionViewWillEnter Method and pre select it with an NgModel!
You can see it here:
Looks like this when the page was loaded
Looks like this when I open the select (pre select value was succesful
HTML Code for the select
<ion-row>
<ion-col>
<ion-item lines="inset">
<ion-label hidden>Abteilungen wählen</ion-label>
<ion-select (ionChange)="loadOpenTicketsForDepts()" style="min-width: 100%"
placeholder="Abteilungen wählen..." multiple [(ngModel)]="selectedDepartments" cancelText="Abbruch"
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 emp is working in
this.authService.getPersNr().then((res) => {
//now load dept
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 in
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;
})
}
Add a reference to your selector named #departmentSelector:
<ion-select #departmentSelector (ionChange)="loadOpenTicketsForDepts()" style="min-width: 100%"
placeholder="Abteilungen wählen..." multiple [(ngModel)]="selectedDepartments" cancelText="Abbruch"
okText="OK">
<ion-select-option value="{{dept.id}}" *ngFor="let dept of departments">
{{dept.name}}
</ion-select-option>
</ion-select>
Then You could access it from your typscript class after view Loaded:
Declare your reference:
@ViewChild("departmentSelector") departmentSelector!: IonSelect;
Then You Could access it when view fully loaded:
ngAfterViewInit(){
//your async function ...
this.authService.getPersNr().then((res) => {
//now load dept
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 in
if (this.selectedDepartments.includes(String(dept.id)) == false) {
// this.selectedDepartments.push(String(dept.id))
this.departmentSelector.value = String(dept.id);
}
//now load tickets for all selected departments
this.loadOpenTicketsForDepts();
})
})
})
//
}