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.