0

mi código del componente es el siguiente:

conectado: boolean;
seleccionarDispositivos(): void {
  funcion() { \\Esta es mi función asíncrona
    ... \\Código asíncrono
    if(...) {
      this.conectado = true;
    } else {
      this.conectado = false;
    }
  }
}

mi código del html es el siguiente:

<button type="button" (click)="seleccionarDispositivos()" class="btn btn-default">
Seleccionar dispositivo
</button>
{{conectado}}

¿Como puedo hacer que la variable conectado este siempre sincronizada? Cada vez que pulso el botón seleccionar dispositivo me muestra siempre el valor anterior y no el actual. Es curioso porque si llamo a otra función del componente entre medias si que se me actualiza el valor en el html, si no me muestra el anterior.

1 respuesta 1

1

Opción 1

Lo más probable que tu función asíncrona como describes no esté actuando sobre el DOM de Angular, es decir, no le está avisando a Angular que debe de renderizar de nuevo.

Hay varios métodos para hacer (forzar) qué Angular renderize de nuevo la/s vistas, te expongo 3:

Utilizando setTimeout o setInterval Angular siempre volverá a renderizar.

Utilizar la clase ChangeDetectorRef que proporciona Angular en su core para llamar al método detectChanges() para que renderize.

Mi recomendación es ChangeDetectorRef, y si este no te funciona tirar del clásico setTimeout.

Opción 2

Puedes hacer que tu propiedad conectada sea reactiva con BehaviorSubject.

Typescript

conectado = new BehaviorSubject<boolean>(false);

seleccionarDispositivos(): void {
  // Código...
  if (/* ... */) {
    this.conectado.next(true);
  } else {
    this.conectado.next(false);
  }
}

HTML

{{ conectado | async }}

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.