Búsqueda de sitios web

javascript - Ionic select: el valor preseleccionado es invisible hasta que se hace clic una vez

Acabo de crear un ion-select en Ionic versión 6. Mi problema es que he preseleccionado un valor con éxito cuando la página se carga, ¡pero este valor preseleccionado no se muestra en la interfaz de usuario!

Solo aparece después de que he hecho clic en seleccionar, pero antes no aparece (como puedes ver en la imagen 2). ¡Cargo los datos en el método ionViewWillEnter y lo preselecciono con un NgModel!

Puedes verlo aquí:

Se ve así cuando se cargó la página

Se ve así cuando abro la selección (el valor preseleccionado fue exitoso)

Código HTML para el 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>

Carga de datos en Typescript:

  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;
})

}

Respuesta #1

Agrega una referencia a tu 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>

Entonces podrías acceder a ello desde tu clase de TypeScript después de que la vista se haya cargado:

Declare su referencia:

  @ViewChild("departmentSelector") departmentSelector!: IonSelect;

Entonces podrías 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();
    })
  })
})


//


}

Artículos relacionados