1

tengo dos componentes, el principal que siempre se crea cuando generamos una aplicación (App.Component) y otro que se denomina RegistroCitas.Component.

App.Component tiene un select el cual posee una lista de cada semestre de cada año. Este dato lo necesito disponible para cada componente de mi aplicación así que realicé un servicio el cual pueda compartir ese dato entre ambos componentes (App.Service). Cabe aclarar que App.Component previamente debe consultar a mi base de datos para obtener todos los semestres de cada año y, posteriormente, el valor de mi select debe colocarse automáticamente de acuerdo al período actual (ej: hoy es 29 de mayo del 2020, por lo tanto, cuando abras la aplicación, automáticamente ese select te aparecerá con el valor del primer semestre del 2020).

Ahora bien, en mi RegistroCitas.Component tengo un formulario el cual posee otro select, ese select contiene la lista de médicos que trabajan en el semestre actual, para ello, mi RegistroCitas.Component debe consultar a mi base de datos de médicos pasando como parámetro ese valor del select del App.Component.

El problema radica en que, cuando se carga la página de RegistroCitas.Component, el valor del select de App.Component no llega a tiempo y hace que el select correspondiente a los médicos quede vacío, pues mi API siempre le llega un valor nulo y retorna un error. ¿Qué puedo hacer?

Este es el código de AppComponent:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { AppService } from './app.service';
import { PeriodoAcademico } from './otras-clases/periodo-academico';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  periodosAcademicos: Observable<PeriodoAcademico[]>;
  selected: string;
  title = 'CitasIPS';
  constructor(private appService:AppService) { }

  ngOnInit(){
    this.appService.periodoAcademicoActual.subscribe(selected => {
      this.selected = selected;      
    });
    this.obtenerPeriodosAcademicos();    
  }

  obtenerPeriodosAcademicos = () => {
    this.periodosAcademicos=this.appService.obtenerPeriodosAcademicos();
    this.periodosAcademicos.subscribe((data) => {
      data.forEach(element => this.periodoAcademicoActual(element));
    });
  }

  periodoAcademicoActual(periodoAcademico: PeriodoAcademico){
    if(periodoAcademico.anio == new Date().getFullYear()){
      if((periodoAcademico.periodo == 1 && new Date().getMonth() >= 0 && new Date().getMonth() <= 5) || (periodoAcademico.periodo == 2 && new Date().getMonth() >= 6 && new Date().getMonth() <= 11)){
        this.selected = periodoAcademico.id.toString();
        this.appService.periodoAcademicoCambio(this.selected);
        return;
      }
    }
  }

  onChange(){
    //location.reload();
    
  }
<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button>
      <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
    </button>
    <h1>Control citas IPS</h1>
    <span style="flex: 1 1 auto;"></span>
    <mat-form-field class="no-padding">
      <mat-label id="periodo_academico_label">
        <font size="2">PERIODO ACADEMICO</font>
      </mat-label>
      <mat-select id="periodo_academico" name="periodo_academico" [(value)]="selected" (selectionChange)="onChange()">
        <mat-option *ngFor="let periodoAcademico of periodosAcademicos | async" value="{{periodoAcademico.id}}">
          {{periodoAcademico.anio}}-{{periodoAcademico.periodo}}</mat-option>
      </mat-select>
    </mat-form-field>
    <span style="flex: 1 1 auto;"></span>
    <div class="row">      
      <div class="col-sm">
        
      </div>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

<mat-sidenav-container style="height: calc(100% - 64px); margin: 0;">
  <mat-sidenav #sidenav mode="side" [class.mat-elevation-z4]="true" style="width: 240px">
    <mat-nav-list dense>
      <a mat-list-item [routerLink]="''">&ensp;Página principal</a>
      <a mat-list-item [routerLink]="'/pacientes'">&ensp;Registro de pacientes</a>
      <mat-expansion-panel [class.mat-elevation-z0]="true">
        <mat-expansion-panel-header><font size="-1">Reserva de citas</font></mat-expansion-panel-header>
        <mat-nav-list dense>
          <a mat-list-item [routerLink]="'/regCitas'">Registro de citas</a>
          <a mat-list-item [routerLink]="'/adminCitas'">Administración de citas</a>
        </mat-nav-list>
      </mat-expansion-panel>
      <a mat-list-item [routerLink]="'/estadisticas'">&ensp;Estadísticas</a>
      <a mat-list-item [routerLink]="'/acercaDe'">&ensp;Acerca de</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    <div style="height: 88vh;">

      <router-outlet></router-outlet>
    </div>

  </mat-sidenav-content>
</mat-sidenav-container>

Este es el código de AppService:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { EstadoSeguimiento } from './otras-clases/estado-seguimiento';
import { ModalidadAfiliacion } from './otras-clases/modalidad-afiliacion';
import { Parentezco } from './otras-clases/parentezco';
import { PersonalSalud } from './otras-clases/personal-salud';
import { Programa } from './otras-clases/programa';
import { ServicioAplicado } from './otras-clases/servicio-aplicado';
import { ServicioComplementario } from './otras-clases/servicio-complementario';
import { TipoIdentificacion } from './otras-clases/tipo-identificacion';
import { TipoPersonalSalud } from './otras-clases/tipo-personal-salud';
import { PeriodoAcademico } from './otras-clases/periodo-academico';

@Injectable({
  providedIn: 'root'
})
export class AppService {
  private periodoAcademicoFuente = new BehaviorSubject('0');
  periodoAcademicoActual = this.periodoAcademicoFuente.asObservable();

  constructor(private http: HttpClient) { }

  obtenerPeriodosAcademicos(): Observable<PeriodoAcademico[]>{
    return this.http.get<PeriodoAcademico[]>('http://127.0.0.1:8000/api/periodos_academicos');
  }
  
  periodoAcademicoCambio(selected: string) {
    this.periodoAcademicoFuente.next(selected);
  }
}

Este es el código de RegistroCitas:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { RegistroCitasService } from './registro-citas.service';
import { AppService } from '../app.service';
import { Observable, Subject, Subscription } from 'rxjs';
import { Cita } from '../otras-clases/cita';
import { Paciente } from '../pacientes/paciente';
import { Parentezco } from '../otras-clases/parentezco';
import { EstadoSeguimiento } from '../otras-clases/estado-seguimiento';
import { ServicioAplicado } from '../otras-clases/servicio-aplicado';
import { PersonalSalud } from '../otras-clases/personal-salud';
import { TipoPersonalSalud } from '../otras-clases/tipo-personal-salud';
import { ServicioComplementario } from '../otras-clases/servicio-complementario';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { formatDate } from '@angular/common';
import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
import { CourseDialogComponent } from '../course-dialog/course-dialog.component';

@Component({
  selector: 'app-registro-citas',
  templateUrl: './registro-citas.component.html',
  styleUrls: ['./registro-citas.component.css']
})
export class RegistroCitasComponent implements OnInit {
  id: number;
  cita: Cita;
  pacientes: Paciente[];
  periodoAcademico: string;
  parentezcos: Observable<Parentezco[]>;
  estadosSeguimientos: Observable<EstadoSeguimiento[]>;
  serviciosAplicados: Observable<ServicioAplicado[]>;
  personalesSalud: Observable<PersonalSalud[]>;
  tiposPersonalSalud: Observable<TipoPersonalSalud[]>;
  serviciosComplementarios: Observable<ServicioComplementario[]>;
  registrarCitaForm: any;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<Paciente[]> = new Subject();
  strqueary: string;
  constructor(private formbuilder: FormBuilder,
    private registroCitasService: RegistroCitasService,
    private appService: AppService,
    private route: ActivatedRoute,
    private router: Router,
    private dialog: MatDialog) {  }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      responsive: true,
      columnDefs: [
        { orderable: false,
          targets: 5 }
      ],
      language: {
        emptyTable: "No hay datos disponibles",
        info: "Mostrando desde _START_ al _END_ de _TOTAL_ elementos",
        infoEmpty: "Mostrando ningún dato",
        infoFiltered: "(filtrado _MAX_ datos totales)",
        infoPostFix: "",
        lengthMenu: "Mostrar _MENU_ elementos",
        loadingRecords: "Cargando...",
        processing: "Procesando...",
        search: "Buscar:",
        zeroRecords: "Sin resultados encontrados",
        paginate: {
          first: "Primero",
          last: "Último",
          next: "Siguiente",
          previous: "Anterior"
        },
        aria: {
          sortAscending: ": Activar para ordenar la tabla en orden ascendente",
          sortDescending: ": Activar para ordenar la tabla en orden descendente"
        }
      }
    };

    this.appService.periodoAcademicoActual.subscribe(selected => this.periodoAcademico = selected);
    this.obtenerPacientes();
    this.obtenerParentezcos();
    this.obtenerEstadosSeguimientos();
    this.obtenerServiciosAplicados();    
    this.obtenerTiposPersonalSalud();
    this.obtenerServiciosComplementarios();

    this.registrarCitaForm = this.formbuilder.group({
      acudiente: ['', [Validators.required, Validators.minLength(1)]],
      parentezco: ['', [Validators.required, Validators.minLength(1)]],
      fecha_cita: ['', [Validators.required, Validators.minLength(1)]],
      hora_cita: ['', [Validators.required, Validators.minLength(1)]],
      estado_seguimiento: ['', [Validators.required, Validators.minLength(1)]],
      personal_salud: ['', [Validators.required, Validators.minLength(1)]],
      tipo_personal_salud: ['', [Validators.required, Validators.minLength(1)]],
      servicio_aplicado: ['', [Validators.required, Validators.minLength(1)]],
      servicio_complementario: ['', [Validators.required, Validators.minLength(1)]],
      observaciones: ['', [Validators.required, Validators.minLength(1)]],
    });
  }

  ngAfterViewInit(){
    this.obtenerPersonalesSalud();   
  }

  onFormSubmit(dataForm: any) {
    const cita = dataForm;
    this.registrar(cita);
    this.registrarCitaForm.reset();
  }

  registrar(cita: Cita) {
    this.registroCitasService.registrarCita(cita).subscribe(
      () => {

      },
      (error) => {
        if (error.error.detail.match('llave duplicada')) {
          //this.openDialog('Error', 'El estudiante ya se encuentra registrado como paciente.', true);
        }
      }
    );
  }

  obtenerPacientes = () => {
    this.registroCitasService.obtenerPacientes().subscribe((data) => {
      this.pacientes = data;
      this.dtTrigger.next();
    });
  }

  obtenerParentezcos = () => {
    this.parentezcos = this.appService.obtenerParentezcos();
  }

  obtenerEstadosSeguimientos = () => {
    this.estadosSeguimientos = this.appService.obtenerEstadosSeguimientos();
  }

  obtenerServiciosAplicados = () => {
    this.serviciosAplicados = this.appService.obtenerServiciosAplicados();
  }

  obtenerPersonalesSalud = () => {
    this.personalesSalud = this.appService.obtenerPersonalSalud(this.periodoAcademico);
  }

  obtenerTiposPersonalSalud = () => {
    this.tiposPersonalSalud = this.appService.obtenerTiposPersonalSalud();
  }

  obtenerServiciosComplementarios = () => {
    this.serviciosComplementarios = this.appService.obtenerServiciosComplementarios();
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

  onClick(id?: number){
    console.log(this.periodoAcademico);
    if(id != null){
      this.id = id;
      console.log(this.id);
    }else{
      this.id = null;
      this.registrarCitaForm.reset();
      console.log(this.id);
    }    
  }
}
<h3 class="titulos">Registrar una cita</h3>
<div class="formbody contenedornormal">
    <div class="container">
        <h6 [hidden]="id != null">Buscar paciente</h6>
        <div [hidden]="id != null" class="contenedor2">
            <div class="row form-group justify-content-center" style="padding-top: 1em;">
                <table id="table" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"
                    class="display table table-hover row-border hover" style="width: 45em;">
                    <thead class="thead-dark">
                        <tr>
                            <th>Identificaci&oacute;n</th>
                            <th>Tipo identificaci&oacute;n</th>
                            <th>C&oacute;digo</th>
                            <th>Nombres</th>
                            <th>Apellidos</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let paciente of pacientes">
                            <td>{{paciente.identificacion}}</td>
                            <td>{{paciente.tipo_identificacion}}</td>
                            <td>{{paciente.codigo}}</td>
                            <td>{{paciente.primer_nombre}}&nbsp;{{paciente.segundo_nombre}}</td>
                            <td>{{paciente.primer_apellido}}&nbsp;{{paciente.segundo_apellido}}</td>
                            <td><button type="button" (click)="onClick(paciente.id)" class="btn btn-primary"><i
                                        class="fa fa-file"></i></button></td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <form [formGroup]="registrarCitaForm" (ngSubmit)="onFormSubmit(registrarCitaForm.value)" [hidden]="id == null">
            <button type="button" (click)="onClick()" class="btn btn-primary" style="margin-bottom: 1em;"><i
                    class="fa fa-arrow-left">&nbsp;</i>Volver atr&aacute;s</button>
            <div class="row form-group">
                <div class="col-sm-6">
                    <label>Apellidos - nombres del acudiente: </label>
                    <input formControlName="acudiente" #acudiente type="text"
                        placeholder="Apellidos y nombres del acudiente" class="form-control" />
                </div>
                <div class="col-sm-6">
                    <label>Parentezco: </label>
                    <select formControlName="parentezco" #parentezco class="form-control">
                        <option selected disabled>Parentezco con el acudiente</option>
                        <option *ngFor="let parentezco of parentezcos | async" value="{{parentezco.id}}">{{parentezco.nombre}}</option>
                    </select>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-sm-6">
                    <label>Fecha de la cita: </label>
                    <input formControlName="fecha_cita" #fecha_cita type="date" min="1930-01-01" max="2019-12-31"
                        class="form-control" />
                </div>
                <div class="col-sm-6">
                    <label>Hora de la cita: </label>
                    <input formControlName="hora_cita" #hora_cita type="time" min="7:00:00" max="20:00:00" step="30:00"
                        class="form-control" />
                </div>
            </div>
            <div class="row form-group">
                <div class="col-sm-4">
                    <label>Estado del seguimiento: </label>
                    <select formControlName="estado_seguimiento" #estado_seguimiento class="form-control">
                        <option selected disabled>Estados del seguimiento</option>
                        <option *ngFor="let estadoSeguimiento of estadosSeguimientos | async" value="{{estadoSeguimiento.id}}">{{estadoSeguimiento.nombre}}</option>
                    </select>
                </div>
                <div class="col-sm-4">
                    <label>Servicio aplicado: </label>
                    <select formControlName="servicio_aplicado" #servicio_aplicado class="form-control">
                        <option selected disabled>Servicios aplicados</option>
                        <option *ngFor="let servicioAplicado of serviciosAplicados | async" value="{{servicioAplicado.id}}">{{servicioAplicado.nombre}}</option>
                    </select>
                </div>
                <div class="col-sm-4">
                    <label>Profesional asignado: </label>
                    <select formControlName="personal_salud" #personal_salud class="form-control">
                        <option selected disabled>Profesionales</option>
                        <option *ngFor="let personalSalud of personalesSalud | async" value="{{personalSalud.id}}">{{personalSalud.nombres}}&nbsp;{{personalSalud.apellidos}}</option>
                    </select>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-sm-8">
                    <label>Observaciones: </label>
                    <textarea formControlName="observaciones" #observaciones
                        class="form-control tamanotextarea"></textarea>
                </div>
                <div class="col-sm-4">
                    <div class="form-row">
                        <label>Tipo de profesional: </label>
                        <select formControlName="tipo_personal_salud" #tipo_personal_salud class="form-control">
                            <option selected disabled>Tipo de profesional</option>
                            <option *ngFor="let tipoPersonalSalud of tiposPersonalSalud | async" value="{{tipoPersonalSalud.id}}">{{tipoPersonalSalud.nombre}}</option>
                        </select>
                    </div>
                    <br />
                    <div class="form-row">
                        <label>Servicios complementarios: </label>
                        <select formControlName="servicio_complementario" #servicio_complementario class="form-control">
                            <option selected disabled>Servicios complementarios</option>
                            <option *ngFor="let servicioComplementario of serviciosComplementarios | async" value="{{servicioComplementario.id}}">{{servicioComplementario.nombre}}</option>
                        </select>
                    </div>
                </div>
            </div>


            <br />
            <div class="row justify-content-center form-group">
                <button type="submit" [disabled]="!registrarCitaForm.valid" class="btn btn-success">Guardar
                    cita</button>
            </div>
        </form>
    </div>
</div>

1 respuesta 1

0

En tu registroCitas.component.html encierra todo en etiquetas <ng-container> de esta manera:

<ng-container *ngIf='this.periodoAcademico'>

<h3 class="titulos">Registrar una cita</h3>
<div class="formbody contenedornormal">
    <div class="container">

    //... todo tu contenido

<ng-container>

Mientras peridoAcademico este vacio ('undefined') el *ngIf lo convertira a false y por tanto no mostrará el contenido hasta que se cargue el dato.

Y esta linea la tienes que mover:

ngAfterViewInit(){
     //Mueve esta linea. 
     this.obtenerPersonalesSalud();   
  }

A esta parte de aqui:

this.appService.periodoAcademicoActual.subscribe(selected => {
    this.periodoAcademico = selected
    //La agregas aqui. 
    this.obtenerPersonalesSalud()

});

De esta manera no se va a obtenerPersonalesSalud hasta que peridoAcademico exista

4
  • Me funcionó! muchas gracias. Otra cosa, de pronto sabes como hacer que cuando se cambie el valor del select de mi App.Component recargue la página de mi RegistoCitas.Component? Como viste arriba, está el método onChange() destinado para esto, y tiene una instrucción comentada porque me carga literalmente toda la página y así se pierde el valor que el usuario haya seleccionado en el select.
    – Shura
    el 29 may. 2020 a las 18:00
  • No uses location.reload. Ejecuta periodoAcademicoCambio con el nuevo valor seleccionado y debera recargase solo todo.
    – Legna
    el 29 may. 2020 a las 18:12
  • Pues no funcionó, usé el método periodoAcademicoCambio pero no recarga :/
    – Shura
    el 6 jun. 2020 a las 2:44
  • Bueno si funciona pero me aparece un error de datatables (cannot reinitalize datatables) cuando se cambia el valor de periodoAcademico y luego aparece la tabla deforme :/
    – Shura
    el 6 jun. 2020 a las 3:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.