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]="''"> Página principal</a>
<a mat-list-item [routerLink]="'/pacientes'"> 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'"> Estadísticas</a>
<a mat-list-item [routerLink]="'/acercaDe'"> 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ón</th>
<th>Tipo identificación</th>
<th>Có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}} {{paciente.segundo_nombre}}</td>
<td>{{paciente.primer_apellido}} {{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"> </i>Volver atrá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}} {{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>