1

Buen día, me enfrento a un dilema de estructurar métodos que comprueben datos en un componente antes de mandar a la pagina siguiente.Aunque la respuesta parecía obvia; usar promesas, no parece funcionar.Tengo en mi componente un formulario simple que al dar click en un botón debe comprobar que el id de usuario exista en una base d datos(lo hago mediante un servicio q llama una API): -mi pagina html:

<form autocomplete="off" (ngSubmit)="validarfrm(forma)" #forma="ngForm">
        <div class="form-group row">
            <div class="col-8">
            Periodo de: <input type="text" class="form-control" name="txtdias" value="60"
                (keyup)="mandaDias(dias.value)" [ngModel]="modelo.txtdias" [class.is-invalid]="false" 
                #dias="ngModel" /> dias 
                  <br>Su id
            Cliente:<input type="text" class="form-control" name="txtidclient" value="1"
                 [ngModel]="modelo.txtidclient" [class.is-invalid]="idNoValido"
                 #txtid="ngModel" /></div>
                 <div class="col-8">
            <input type="submit" [routerLink]="routerAutorize" name="btnAdquirir" class="btn btn-primary " disabled
                value="" #asegurabtn> &nbsp;&nbsp;<input type="button" enabled
                value="Cancelar" (click)="resetActivo(asegurabtn)" class="btn btn-secondary " #cancelabtn>
            </div>
        </div>
    </form>

-mi componente

validarfrm(frm:NgForm){
 let frmcontrols=frm.value;
 this.verificacliente(frmcontrols.txtidclient);

}

verificacliente(_id) { console.log('ejcutando verificacliente( id)');
this.apiseguro.mipromesa(_id);//<- éste debe llenar un modelo con datos del usuario
console.log('en componente recojo el idregistrado'); this.idCliente=this.apiseguro.idregistrado;//<- opcion a capturar id alert('ahora prodrá continuar nagegando'); }

-mi servicio que consulta una api

 mipromesa(_idcliente:number) {
    var p = new Promise(function (resolve, reject) {
      // Hacer tarea asíncrona y then...
      let observ =this._http.get(`${this.url3}?id=${_idcliente}`);
      if ( observ!=null) {
        resolve('Success!');
      }
      else {
        reject('Fallo la promesa!');
      }
    });

    p.then(function () {
      /* hacer algo con el resultado */
      console.log('promesa resolvió correcto,se llenará el modelo');
      this.modelClient=this._http.get(`${this.url3}?id=${_idcliente}`);
    }).catch(function () {
      /* error :( */
        console.log('No asignó el modelo,error en peticion');
    })
  }

Pero la respuesta siempre es asíncrona, necesito que el botón de mi componente espere la respuesta de la api para continuar,cómo puedo indicar una promesa síncrona?

3
  • declarar la promesa en el mismo componente, implicaría importar el HttpCliente, repetir mi url del api (considerando que parte de la ruta está en archivo proxy) y luego llenar el modelo del serivicio desde el componente me parece un antipatron Commented el 10 ago. 2020 a las 15:42
  • Si estás usando un Validator, puedes devolver un Observable con el resultado. La clase FormControl es capaz de usar validadores asíncronos. Te recomiendo no usar promesas, sino observables. Angular está diseñado para usar Observables en todo momento Commented el 10 ago. 2020 a las 16:02
  • @Pablo lozano lo que pasa es que ya lo tenía con observable buscaCliente(_idcliente): cliente { let observ = this._http.get<cliente>(${this.url3}?id=${_idcliente}); observ.subscribe(resp => { this.modelClient = resp; }); .El problema es que observable entrega asíncrona la respuesta, yo necesito q espere la respuesta. No se si te refieras a declarar éste observable en el mismo componente.ts Commented el 10 ago. 2020 a las 19:06

1 respuesta 1

0

Yo probaría cambiando el enfoque. Deberías usar Observables en lugar de Promesas (aunque con promesas podrias resolverlo también).

¿Por qué usar Observables con Angular?

Angular se lleva mucho mejor con este patrón, tiene librerías que la utilizan y te permiten manipularlo a tu gusto.

Para corregir tu código, haría lo siguiente:

    miObservable(_idcliente:number) {
    return this._http.get(`${this.url3}?id=${_idcliente}`)
  }

_http deberias inyectar HttpClient (libreria de angular para realizar comunicaciones http) desde el constructor de la clase donde creas este método.

¿Cómo usarlo en mi componente?

Para utilizarlo desde tu componente, primero inyectamos el servicio en el constructor del mismo.

Luego es fácil:

public miMetodo(_idCliente:number)
{
  this._miServicioInyectado.miObservable(_idCliente).subscribe(x=>{
     //HACER COSAS
  })
}

Ahora, vos necesitas "bloquear" tu formulario para que no sigan, se me ocurren dos cosas, podrías usar un spinner o bloquear el resto de los input. Cualquiera que sea tu solución deberias llamarlo antes de subscribirte, así:

public miMetodo(_idCliente:number)
//BLOQUEAR COMPONENTE O LLAMAR SPINNER CON UN FLAG
{
   this._miServicioInyectado.miObservable(_idCliente).subscribe(x=>{
         //DESBLOQUEAR COMPONENTE O CAMBIAR FLAG SPINNER
   })
}
2
  • te agradezco, de hecho es muy similar a como empecé a plantearlo, el asunto era que al implementarlo en mi componente no sólo me subscribía sino que asignaba un valor a una variable que se ubica en el servicio que llama la api(donde declaro el observable) por lo que intentaba leer dicha variable antes de obtener la respuesta, al final era cosa de asignarlo dentro de la respuesta de subcribe y no poner otra cosa fuera de la invocación; no se si me explico Commented el 11 ago. 2020 a las 0:46
  • Genial ! si necesitas manejar luego múltiples llamadas de observables te recomiendo ver rxjs y ver si alguna función encaja con lo que necesites ! Saludos ! Commented el 11 ago. 2020 a las 15:11

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.