Acabo de crear una selección de iones en la versión iónica 6. Mi problema es que preseleccioné con éxito un valor cuando se carga la página, pero este valor de preselección no se muestra en la interfaz de usuario.
Simplemente aparece después de haber hecho clic en seleccionar, pero antes no aparece (como puede ver en la imagen 2). ¡Cargué los datos en el método ionViewWillEnter y los preseleccioné con un NgModel!
Puedes verlo aqui:
Se ve así cuando se cargó la página
Se ve así cuando abro la selección (el valor de preselección fue exitoso
Código HTML para la selección
<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>Carga de datos mecanografiados:
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; })}
Agregue una referencia a su selector llamado #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>Luego, puede acceder a él desde su clase de mecanografiado después de ver Cargado:
Declara tu referencia:
@ViewChild("departmentSelector") departmentSelector!: IonSelect;Entonces podría acceder a él cuando la vista esté completamente cargada:
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(); }) }) }) // }