Hola mi consulta es la siguente, tengo un select en HTML que segun el que seleccione me muestra las opciones que estan abajo, pero solo me funciona en el navegador de firefox, y no me funciona en ningun otro, y quisiera saber como lo puedo arreglar para que me resulte en los otros navegadores
<div class="form-group">
<label for="tpres">Tipo Reservación:</label>
<select class="form-control" id="tpres" name="tpres" required>
<option value="0" (click)="op1=false;op2=false;op3=false;op4=false;op5=false;">Seleccione Un Tipo De Reservación</option>
<option value="1" (click)="op1=true;op2=false;op3=false;op4=false;op5=false;">Día Único</option>
<option value="2" (click)="op1=false;op2=true;op3=false;op4=false;op5=false;">Día Semanal</option>
<option value="3" (click)="op1=false;op2=false;op3=true;op4=false;op5=false;">Semanal</option>
<option value="4" (click)="op1=false;op2=false;op3=false;op4=true;op5=false;">Anual (Proceso)</option>
<option value="5" (click)="op1=false;op2=false;op3=false;op4=false;op5=true;">Personalizado (Proceso)</option>
</select>
</div>
las opciones que al seleccionar en el select de arrba deben mostrar las siguientes:
<div *ngIf="op1">
<div class="form-group">
<div class="form-row">
<div class="col">
<label for="fecha_op1">Fecha :</label>
<input type="date" class="form-control" min="{{todate | date:'yyyy-MM-dd'}}" [(ngModel)]="guardado_OP1.fecha" id="fecha_op1" name="fecha_op1">
</div>
</div>
</div>
<div class="form-group row" style="width:100%;;">
<div *ngFor="let hora1 of horas">
<label class="col-sm-2">
<input class="chk_sel_h_op1 chk_all_style" type="checkbox" value="{{hora1.id}}"> {{hora1.h_inicio}} - {{hora1.h_fin}}
</label>
</div>
</div>
</div>
<div *ngIf="op2">
<div class="form-group row">
<div class="col-sm-1">
<label class="control-label" for="fecha_desde_op2">Fecha Desde :</label>
</div>
<div class="col-sm-2">
<input type="date" class="form-control" [(ngModel)]="guardado_OP2.fecha_desde" id="fecha_desde_op2" name="fecha_desde_op2">
</div>
<div class="col-sm-1">
<label class="control-label" for="fecha_hasta_op2">Fecha Hasta :</label>
</div>
<div class="col-sm-2">
<input type="date" class="form-control" [(ngModel)]="guardado_OP2.fecha_hasta" id="fecha_hasta_op2" name="fecha_hasta_op2">
</div>
<div class="col-sm-3">
<select class="form-control" [(ngModel)]="guardado_OP2.diassemanales" id="diassemanales_op2" name="diassemanales_op2">
<option *ngFor="let dia of dias" selected="{{dia.selected}}" value="{{dia.id}}">{{dia.text}}</option>
</select>
</div>
<div class="col-sm-3">
<select class="form-control" [(ngModel)]="guardado_OP2.contadorsemanal" id="contadorsemanal_op2" name="contadorsemanal_op2" multiple>
<option value="1" selected>Semana 1</option>
<option value="2">Semana 2</option>
<option value="3">Semana 3</option>
<option value="4">Semana 4</option>
<option value="5">Semana 5</option>
</select>
</div>
</div>
<div class="form-group row" style="width:100%;;">
<div *ngFor="let hora1 of horas">
<label class="col-sm-2">
<input class="chk_sel_h_op2 chk_all_style" type="checkbox" value="{{hora1.id}}"> {{hora1.h_inicio}} - {{hora1.h_fin}}
</label>
</div>
</div>
</div>
<div *ngIf="op3">
<div class="form-group">
<div class="form-row">
<div class="col">
<label for="fechaInicio">Fecha Desde:</label>
<input [(ngModel)]="guardado_OP3.fecha_desde" type="date" class="form-control" id="fechaInicio" name="fechaInicio">
</div>
<div class="col">
<label for="fechaFin">Fecha Hasta:</label>
<input [(ngModel)]="guardado_OP3.fecha_hasta" type="date" class="form-control" id="fechaFin" name="fechaFin">
</div>
</div>
</div>
<table class="table table-bordered">
<thead style="text-align: center;">
<tr class="table-primary">
<th>Módulos</th>
<th>Lunes</th>
<th>Martes</th>
<th>Miercoles</th>
<th>Jueves</th>
<th>Viernes</th>
<th>Sabado</th>
<th>Domingo</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hora of horas">
<td style="text-align:center;">{{hora.h_inicio}} - {{hora.h_fin}}</td>
<td style="text-align:center;"><input class="chk_sel_l_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
<td style="text-align:center;"><input class="chk_sel_m_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
<td style="text-align:center;"><input class="chk_sel_x_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
<td style="text-align:center;"><input class="chk_sel_j_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
<td style="text-align:center;"><input class="chk_sel_v_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
<td style="text-align:center;"><input class="chk_sel_s_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
<td style="text-align:center;"><input class="chk_sel_d_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
</tr>
</tbody>
</table>
</div>
el tema es que en firefox lo hace todo perfecto pero los probe en otros navegadores como chrome, opera, explorer y no me funciona.