2

Estoy desarrollando una aplicación en Angular y tengo un template que cuenta con una serie de inputs.

Dichos campos reciben mediante un @Input() valores desde una conexión con un broker de mensajería y los muestra en tiempo real al usuario.

Hasta aquí todo bien, el comportamiento que he de implementar implica cambiar el color de fondo de dichos inputs (de manera individual) mediante ciertas clases CSS en función de dos factores:

  • El <input> ha de ponerse verde cuando comience a recibir valores del stream de datos
  • Ha de ponerse naranja cuando pasen 10 segundos sin haber recibido ningún dato

Había pensado en utilizar la directiva [ngClass] de Angular para asignar dichas clases según el valor recibido por otro observable con el nombre de la clase a aplicar, asignado según uno de los 2 casos anteriores), algo así:

 export class Component implements OnInit {
 @Input() valor:number;

<input [className]="'status'"
 type="text" [value]="valor" readOnly="true">

Las clases CSS ya están creadas pero requeriría ayuda en la parte de emitir el nombre de dicha clase en la suscripción al stream de datos. Adjunto a continuación una captura del servicio que se suscribe al flujo de datos y emite los valores para que se pueda ver más claro:

private valoresSource = new BehaviorSubject<number>(0);
public valores$ = this.valoresSource.asObservable();

this.client.onConnect = () => {
  this.client.subscribe("/topic/nombreTopic" + param, e => {
      //some checks
      //Aquí se deberían hacer las comprobaciones para enviar un nombre de clase CSS u otro
      this.valoresSource.next(e.body);
    };
  });
}

PD: Si fuera de utilidad para simplificar la solución cabe la posibilidad de añadir un campo a cada mensaje recibido por el stream con la hora actual (en ms).

Simulación en stackblitz: https://stackblitz.com/edit/angular-ivy-dkdzcp

2
  • Hola, puedes hacer un ejemplo en stackblitz de lo que tienes?
    – Legna
    Commented el 3 jun. 2020 a las 13:27
  • @Legna no he usado nunca stackblitz pero he creado una simulación del proyecto muy básica, espero que te sirva (adjunto el enlace a la pregunta original). La idea como decía era que cuando se empiecen a recibir valores se ponga la casilla color verde y cuando pasen 10 segundos se vayan poniendo color naranja hasta que vuelvan a recibir datos y se volverán verde de nuevo (los colores se activan de manera individual por casilla.
    – Javigim29
    Commented el 3 jun. 2020 a las 15:40

2 respuestas 2

3

La solución más fácil e inmediata sería usar setTimeout con clearTimeout.

Una vez se recibe un nuevo dato del Subject<>, se pone el estado "activo" (color verde) y empieza a correr un setTimeout de diez segundos. Cuando este timeout se completa, el estado pasa a "inactivo".
La gracia está en mantener ese timeout en una variable para poderlo cancelar. El timeout se cancela justo cuando se recibe un nuevo evento del Subject<> y se pone a correr un nuevo timeout.

type BrokerState = 'active' | 'inactive';

@Component({...})
export class Parent implements OnInit {
  state: BrokerState = 'inactive';
  timeout: NodeJS.Timer;

  // ...
  ngOnInit() {
    this.source.subscribe(value => {
      // ...

      // Cancelamos el timeout actual.
      clearTimeout(this.timeout);

      // Cambia el state
      this.state = 'active';

      // Reasignamos el nuevo timeout de 10s
      this.timeout = setTimeout(() => {
        this.state = 'inactive';
      }, 10000); // 10s
    });
  }
}

Espero que sirva.

2

Puedes utilizar setInterval para lograr lo que deseas.

iniciarSuscripcion() {
    this.intervalo = setInterval(() => {
      if (this.contador >= this.tiempoDeComprobacionesEnSegundos) {
        this.activo = false;

        this.logDeTiempos.push({
          tiempo: this.contador,
          tipo: "MAS DE 10 SEGUNDOS"
        });
      }
      this.contador++;
    }, 1000);

    this.streamService.iniciarSuscripcion();
  }

Solo agrega estas lineas mas al subscribe:

this.streamService.valores$.subscribe(valores => {
      this.valores = valores;

      this.logDeTiempos.push({
        tiempo: this.contador,
        tipo: "STREAM RECIBIDO"
      });


      this.contador = 0;
      this.activo = true;
    });

Y no olvides destruir el interval que creamos al salir del componente, de otra manera se seguira ejecutando:

 ngDestroy(){
    clearInterval(this.intervalo)
  }

Y para pasar el estilo deseado solo ocupas hacer esto al componente en tu html:

<app-child 
    [valor]="valores[i]" 
    [status]="activo?'active':'standby'">
</app-child>

Te dejo un ejemplo funcional aqui

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.