2

Desearía que al seleccionar una cosa u otra de un <select>, me muestre esa cosa u otra después.

Mi código es el siguiente:

<select ([ngModel])="tipo" class="custom-select">
    <option selected [value]="0">Citas</option>
    <option [value]="1">Pacientes</option>
</select>

<div class="card-header-submenu">
    <span *ngIf="tipo == 1"><i class="fas fa-user"></i> Pacientes</span>
    <span *ngIf="tipo == 0"><i class="fas fa-calendar-alt"></i> Citas</span> 
</div>
3
  • ¿Podrías especificar qué es "quiero hacer que al seleccionar una cosa y otra de un select me muestre una cosa u otra"? No entiendo muy bien qué quieres hacer. ¿Quieres que si seleccionas "Citas" parezca el texto "Citas" y si seleccionas "Pacientes" aparezca el texto "Pacientes"? el 11 jun. 2019 a las 10:57
  • @OscarGarcia sí, eso mismo el 11 jun. 2019 a las 10:59
  • ¿Podrías probar a seguir las indicaciones que proporciono en mi respuesta y decirme si solucionan tu problema? el 11 jun. 2019 a las 12:30

1 respuesta 1

1

Solución básica

Tu problema se puede solucionar haciendo las siguientes modificaciones en app.module.ts:

  • Agregar import { FormsModule } from "@angular/forms";.
  • Agregar FormsModule a imports.

Además, habría que configurar un estado inicial en el componente:

export class AppComponent {
  /* Opción seleccionada por defecto del campo "select" */
  tipo: string = "0";
  /* Resto del código */
}

Tras eso debería funcionar (sin hacer uso del selected en unas de las opciones):

<select [(ngModel)]="tipo" class="custom-select">
  <option value="0">Citas</option>
  <option value="1">Pacientes</option>
</select>

<div class="card-header-submenu">
  <span *ngIf="tipo == 1">Pacientes</span>
  <span *ngIf="tipo == 0">Citas</span>
</div>

He dejado la aplicación funcionando en (este enlace).

PD: No deberías usar [value]="0" o [value]="1" ya que el operador [] en [value] ejecuta en javascript el código proporcionado (0 o 1, que devuelve el valor 0 o 1) para definir el valor que tendrá el campo value. Bastaría con poner value="0" y value="1".


Solución propuesta

Para hacer tu código más flexible deberías configurar los elementos del menú desplegable en código, así como las clases que se agregarán al icono que se muestra junto al texto, de la siguiente manera:

export class AppComponent {
  tipoSeleccionado: number = 0;
  tipos = [
    { id: 0, texto: "Citas", clase: "fa-user" },
    { id: 1, texto: "Pacientes", clase: "fa-calendar" }
  ];
}

La propiedad tipoSeleccionado será la que indique cuál de los elementos de tipo ha sido seleccionado y en tipos se almacenan todas las opciones posibles.

Para mostrar el resultado haremos uso de *ngFor para generar un <option> por cada elemento de tipos. Cada elemento contendrá tipo.id como el campo que se introducirá en value y tipo.texto como el texto que se mostrará en el menú desplegable. Fíjate que por ahora no hacemos uso de tipo.clase.

<select [(ngModel)]="tipoSeleccionado" class="custom-select">
  <option *ngFor="let tipo of tipos" [value]="tipo.id">
    {{ tipo.texto }}
  </option>
</select>

Ahora haremos uso de ngClass para que agregue la clase asociada al elemento seleccionado. Fíjate en esta ocasión que lo que hay en class="fa" es la clase que será común sea cual sea la clase adicional que se agregará dependiendo del elemento seleccionado:

<div class="card-header-submenu">
  <span>
    <i class="fa" [ngClass]="tipos[tipoSeleccionado].clase"></i>
    {{ tipos[tipoSeleccionado].texto }}
  </span>
</div>

Puedes ver este ejemplo funcionando en (este enlace).

3
  • Así logré que funcionase, pero el selected no funciona el 11 jun. 2019 a las 13:14
  • No debes indicar el selected porque Angular cambia la opción inicial preseleccionada según el valor inicial de la variable tipo. Mira en mi app.component.ts como le doy un valor inicial. el 11 jun. 2019 a las 13:16
  • Me he tomado la libertad de implementar una solución que te permite sacar provecho de angular para poder escalar los elementos del menú desplegable para evitarte múltiples <span> con diferentes *ngIf. Te recomiendo que le eches un vistazo. el 12 jun. 2019 a las 6:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.