2

Buenas tardes. Tengo un formulario en Angular 4 con una serie de select que deben rellenarse con consultas a una API Rest. En la consulta a la API, se envían parámetros del option marcado, para de este modo rellenar el siguiente select, es decir: En este select se hace una consulta inicial a una API, que extrae unos nombres y unos identificadores

<div class="input-field col s12">
 <select id="listCenTra">
    <option value="{{centro.id}}" *ngFor = "let centro of resultadoCentro;">{{centro.name_com}}
    </option>
 </select>
 <label>Seleccione centro de trabajo</label>

A continuación, hay otro campo select, el cual, se rellena con otra consulta a la API, que se tiene que producir cuando se seleccione un Centro, ya que debo realizar la consulta en base al campo centro.id del option seleccionado:

<div class="input-field col s12">
        <select id="listEsp">
          <option value="" *ngFor = "let especialidad of resultadoEspecialidades;">{{especialidad.name}}</option>
        </select>
        <label>Seleccione especialidad</label>
      </div>

He conseguido que se ejecute una función al seleccionar una opción añadiendo al desplegable la clase browser-default:

 <div class="input-field col s12">
        <select class="browser-default" id="listConcep" (change)='changeCentra($event)'>
          <option value="" *ngFor = "let concepto of resultadoConcepto;">{{concepto.name}}</option>
        </select>
        <label>Seleccione concepto</label>
      </div>

En cambio, en el momento en el que se le aplica los estilos de materializecss, este deja de funcionar

La pregunta es: ¿como puedo disparar una función en el momento en el que se seleccione un option del campo select?.

Muchas gracias por la ayuda.

2 respuestas 2

3

Puedes detectar la selección de una opción y el cambio de dicha opción con el evento que se emite por default con Angular((change)=''), para así poder hacer la petición a la API. Te dejo un ejemplo a continuación:

Template:

 <div class="input-field col s12">
 <select id="listCenTra" (change)="onChange($event.target.value)">
    <option value="{{centro.id}}" *ngFor = "let centro of resultadoCentro;">{{centro.name_com}}
    </option>
 </select>
 <label>Seleccione centro de trabajo</label>

Componente:

onChange(centroId) {
    console.log(centroId); // Aquí iría tu lógica al momento de seleccionar algo
}

Alternativa

Si el anterior método, no te llegase a funcionar, existe la posibilidad de hacer lo mediante "two-way data-binding"

<div class="input-field col s12">
     <select id="listCenTra" [ngModel]="selectedWork" (ngModelChange)="onChange($event)" name="sel2">
        <option [value]="centro.id" *ngFor = "let centro of resultadoCentro;">{{centro.name_com}}
        </option>
     </select>
     <label>Seleccione centro de trabajo</label>

Si desearas optener el "centro de trabajo" como objeto en si, debes utilizar [ngValue] es lugar de [value]

<select id="listCenTra" [ngModel]="selectedWork" (ngModelChange)="onChange($event)" name="sel2">
                <option [ngValue]="centro" *ngFor = "let centro of resultadoCentro;">{{centro.name_com}}
                </option>
             </select>
2
  • Gracias por tu respuesta Federico. Efectivamente, he comprobado que con ambos metodos se aplica la funcion al cambio de option del select. El problema esta en que, probandolo con por ejemplo, material de angular, se ejecutaba todo correctamente, pero haciendo uso de materializecss, que es lo que estoy usando ninguna de las formas que me has comentado parecen funcionar. No surte ningun tipo de efecto y ya no se como aplicarlo a este marco. Commented el 2 ene. 2018 a las 18:35
  • Claro, comprendo. Intenta agregando en la solución de "two-way data-binding": [(ngModel)]="selectedWork" #listCenTra required name="selectedWork" [materializeSelectOptions]="selectedWork" en el tag <select> y <option value="" disabled selected>Seleccione un lugar de trabajo</option> simulando opción por default, para que siempre exista una. Commented el 2 ene. 2018 a las 18:47
1

Template:

<mat-select formControlName="listCenTra" (selectionChange)="onChange($event.value)">
    <mat-option *ngFor="let centro of resultadoCentro" [value]="centro.id">
        {{centro.name_com}}                  
    </mat-option>
</mat-select>

Componente:

onChange(centroId) {
    console.log(centroId); // Aquí iría tu lógica al momento de seleccionar algo
}

con este funciona muy bien Angular Material

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.