0

Estoy realizando un reporte que incluye filtros multinivel (tres niveles), por defecto carga la lista de Sedes de la universidad, al seleccionar la sede de universidad, en el siguiente select salen las FACULTADES, al seleccionar una faculta salen las ESCUELAS, selecciona la escuela y al dar click en Buscar, buscará todos los alumnos SEGUN (SEDE - FACULTAD - ESCUELA).

Hasta ahora realizo todo ese flujo.

Pero si el usuario ya cargo todo los select y cambia de SEDE (PRIMER FILTRO) el SELECT de FACULTAD debe de limpiarse y de ESCUELA debe estar sin ningun <option> cargado.

COMO ELIMINAR LOS OPTION DEL SELECT DE ESCUELA? Para hacer de nuevo la petición al back?

PD: uso nebular(es como bootstrap) omitir.

reporte-alumno.component.ts

    import { ChangeDetectionStrategy,Component, OnInit } from '@angular/core';
    import {FormBuilder, FormGroup, Validators} from '@angular/forms';
    import {ReporteAlumnoService} from '../../services/reporte-alumno.service';
    
    
    @Component({
      selector: 'app-reporte-alumno',
      changeDetection: ChangeDetectionStrategy.OnPush,
      templateUrl: './reporte-alumno.component.html',
      styleUrls: ['./reporte-alumno.component.css']
    })
    export class ReporteAlumnoComponent implements OnInit {
      
      miForm: FormGroup;
    
      sedes: any[]=[];
      facultades: any[]=[];
      escuelas: any[]=[];
      
      constructor(
                    private reportAlumnoService:ReporteAlumnoService,
                    private fb:FormBuilder) 
                  {
                    this.reportForm();
                  }
    
      ngOnInit(): void {
        this.reportAlumnoService.getSede().subscribe( sedes => {      
          this.sedes = sedes;    
        });
    
        
      }
    
      onFacultad(_sede):void {
        this.reportAlumnoService.getFacultad(_sede)
        .subscribe( facultades => {
          this.facultades = facultades;
        });
      }
    
      onEscuela(_facultad):void {
        this.reportAlumnoService.getSede(_facultad).subscribe( escuelas => {      
          this.escuelas = escuelas;   
        });
      }
buscar(){
        this.reportAlumnoService.getAlumnos(this.mainForm.getRawValue())
        .subscribe( resp => {
          console.log(resp);
        });
      }
    
      reportForm(){
        this.miForm = this.fb.group({
          id_sede:['',Validators.required],
          id_facultad:['',Validators.required],
          id_escuela:['',Validators.required]
        });
      }
    
  }

reporte-alumno.component.html

<nb-card accent="primary">
    <nb-card-header class="row pt-2 pl-3 pb-0 border-bottom-0">
        <div class="col-md-6 mt-3"><strong>Reporte de alumnos por EP</strong></div>    
    </nb-card-header>
    <nb-card-body>
        <form [formGroup]="miForm">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-12">
                        <div class="form-group">
                            <label class="label">Sedes - UNI</label>
                            <nb-select formControlName="id_sede" (ngModelChange)="onFacultad($event)" placeholder="Escoja una sede">
                                    <nb-option *ngFor="let sede of sedes" [value]="sede.id_sede" >{{sede.nombre}}</nb-option>
                            </nb-select>
                        </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                        <div class="form-group">
                            <label class="label">Facultades</label>
                            <nb-select placeholder="Escoja una facultad" formControlName="id_facultad" (ngModelChange)="onEscuela($event)">
                                <nb-option *ngFor="let facultad of facultades" [value]="facultad.id_facultad" >{{facultad.nombre}}</nb-option>
                            </nb-select>
                        </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                        <div class="form-group">
                            <label class="label">Escuelas</label>
                            <nb-select placeholder="Escoja una escuela" formControlName="id_escuela">
                                <nb-option *ngFor="let escuela of escuelas" [value]="escuela.id_escuelas" >{{escuela.nombre}}</nb-option>
                            </nb-select>
                    </div>
            
            <div class="col-12">
                        <div class="row justify-content-center">
                            <div class="col-12 col-md-3">
                                     <button nbButton (click)="buscar()"  status="primary">Buscar</button>
                            </div>
                        </div>
                </div>
        </div>
        </form>
    </nb-card-body>
</nb-card>

1 respuesta 1

1

Al seleccionar una sede inicializa de nuevo el arreglo de escuelas.

onFacultad(_sede):void {
        // limpiar arreglo de escuelas
        this.escuelas = [];
     
        this.reportAlumnoService.getFacultad(_sede)
        .subscribe( facultades => {
          this.facultades = facultades;
        });
      }

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.