Saltar al contenido

¿Cómo establecer el valor seleccionado predeterminado de la opción de iones?

Solución:

El problema parece ser que a ion-option no le gustan los objetos en rc3. Tengo que trabajar solo con la parte de identificación del objeto y escribir un administrador de cambios separado que encuentre el objeto necesario y lo establezca como un valor.

  <ion-select [ngModel]="company.form.id" (ngModelChange)="companyFormSelected($event)" okText="Ok" cancelText="Mégsem">
    <ion-option *ngFor="let form of forms" [value]="form.id" [selected]="form.id == company.form.id">{{form.name}}</ion-option>
  </ion-select>

Y el manejador de cambios:

companyFormSelected(newform) {
    let selectedForm = this.forms.find((f)=>{
      return f.id === newform;
    });
    this.company.form=selectedForm;
}

Esto parece ser un error en rc3 pero no sé dónde puedo informar de errores. Abrí un tema en el foro iónico.

Si trabaja con objetos de valor xor predeterminado, la forma más limpia es proporcionar una función de comparación a la [compareWith] atributo. Esta función toma 2 objetos en parámetros y devuelve verdadero si son iguales. De esta forma, los valores existentes en el modelo se seleccionarán al inicio. Esto también funciona si se agregan nuevos datos en el modelo fuera de la selección.

El siguiente ejemplo está tomado del documento oficial de Ionic

<ion-item>
  <ion-label>Employee</ion-label>
  <ion-select [(ngModel)]="employee" [compareWith]="compareFn">
    <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
  </ion-select>
</ion-item>

compareFn(e1: Employee, e2: Employee): boolean {
  return e1 && e2 ? e1.id == e2.id : e1 == e2;
}

EDITAR: el uso de dobles iguales lo hace funcionar para Ionic 4 (como sugiere Stan Kurdziel en el comentario)

<ion-select [(ngModel)]="name">// binding the value available from ts file
    <ion-option *ngFor="let form of forms; let idx = index" [value]="form.name"  selected="{{(idx==0).toString()}}">{{form.name}}</ion-option>
</ion-select>

dentro de su archivo ts

name = this.forms[0].name //assign the variable name to the first index of your array
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *