1

Estoy usando Angular 8 y estoy tratando de hacer 3 peticiones asíncronas de forma simultáneas a mi API por lo que estoy usando forkJoin verifico los datos en console.log y me los trae correctamente el problema es que no me los muestra en mi vista en sus respectivos select espero me puedan orientar para solucionarlo he googleado pero no encuentro la solución.

El funciones de mi servicio donde uso el forkJoin :

  public getPacientes(): Observable<any> {

       return this._http.get(this.url + 'pacientes',{ headers : this.getHeaders()});
    }
  public getMedicos(): Observable<any> {

       return this._http.get(this.url + 'medicos',{ headers : this.getHeaders()});
    }
  public getInstituciones(): Observable<any> {

       return this._http.get(this.url + 'instituciones', { headers : this.getHeaders()});
   }
  public getData(): Observable<any> {
       return forkJoin([this.getPacientes(), this.getMedicos(), this.getInstituciones()]);
   }

Función del componente donde llamo al servicio:

      cargaDataCombos(){
        this._RegistroOrdenService.getData().subscribe(
          response => {
             //Asigno a cada variable de tipo interface ya que estas las uso en el select option
             this.pacientes = response[0].pacientes;
             this.medicos = response[1].medicos;
             this.instituciones = response[2].instituciones;
           
            //Datos se muestra correctamente en el log pero no cargan en los select
             console.log( this.pacientes,this.medicos,this.instituciones );
          },
          error => {
            console.log('Error al obtener al cargar');
          }
        );
      }

     ngOnInit(): void {
        this.cargaDataCombos();
    }

Los select de la vista :

<select id="selectPickerPacientes" class="selectPickerPacientes" data-size="6"  data-width="100%" title="Seleccione al paciente ..." data-live-search="true">
     <option *ngFor="let p of pacientes; let i= index;" attr.data-paciente ="{{ p | json }}"  >{{p.primerNombre +' '+ p.segundoNombre + ' '+ p.apellidoPaterno +' '+ p.apellidoMaterno }}</option>
</select>
        
<select id="selectPickerMedicos" class="selectPickerMedicos" data-size="6"  data-width="100%" title="Seleccione al medico ..." data-live-search="true">
      <option *ngFor="let m of medicos; let i= index;" attr.data-medico ="{{ m | json }}"  >{{m.primerNombre +' '+ m.segundoNombre + ' '+ m.apellidoPaterno +' '+ m.apellidoMaterno }}</option>
</select>
        
<select id="selectPickerInsituciones" class="selectPickerInstituciones" data-size="6"  data-width="100%" title="Seleccione la institución ..." data-live-search="true">
      <option *ngFor="let inst of instituciones; let i= index;" attr.data-institucion ="{{ inst | json }}"  >{{inst.nombre}}</option>
</select>

1 respuesta 1

3

Dos cosas a mencionar, forkJoin espera un rest parameter.
Por tanto, tu método getData debería ser

getData = (): Observable<any> =>
    forkJoin(
        this.getPacientes(),
        this.getMedicos(),
        this.getInstitucionMes()
    );

Fíjate que no paso un array de Observable<>, sinó directamente todos los Observable<> como argumentos.

Segundo tema, aunque no sea el error en sí.
Piensa que estos datos tardarán en llegar. La vista se va a renderizar antes de que estos datos estén listos, por lo que podrías condicionar el renderizado de esos select hasta que tengas datos que pintar.

<div class="selects" *ngIf="loaded else loading">
    <select>...</select>
    <select>...</select>
    <select>...</select>
</div>

<ng-template #loading>
    Fetching data...
</ng-template>

Con una flag de control, loaded. Esta flag la va a poner a true el component una vez se tengan los datos para renderizar.

public loaded = false;

ngOnInit() {
    this.load();
}

load = () => {
    this.service.getData().subscribe(
        ([pac, med, ins]: any[]) => {
            this.pacientes = pac.pacientes;
            this.medicos = med.medicos;
            this.instituciones = ins.instituciones;

            // Ponemos la flag a true
            this.loaded = true;
        },
        console.error
    );
}

Espero que sirva.

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.