3

Buenos días comunidad.

Llevo varios días con el siguiente problema y no encuentro la manera de solucionarlo.

Tengo un array de objetos con sus propiedades, el cual muestro en con un ion-list. Presento el listado en el HTML de la siguiente manera:

<ion-list>
  <ion-item *ngFor="let remota of remsFiltradas" (click)="entrarARemota(remota)">

    <table style="border: 0px; width: 100%">
      <tr>
        <td>
            <!--<img *ngIf="esVirtual(remota) == true" src="assets/imgs/Virtual.png" style="height: 10vh; width: 7vh;">-->
            <div class="avatar" style="background-image: url(assets/imgs/Virtual.png); background-color: green" *ngIf="esVirtual(remota) == true && remota.estado_comunicacion == 'NORMAL'"></div>
            <div class="avatar" style="background-image: url(assets/imgs/Virtual.png); background-color: rgb(0, 110, 255)" *ngIf="esVirtual(remota) == true && remota.estado_comunicacion == 'NORMAL S'"></div>
            <div class="avatar" style="background-image: url(assets/imgs/Virtual.png); background-color: red" *ngIf="esVirtual(remota) == true && remota.estado_comunicacion == 'ALARMA'"></div>
            <div class="avatar" style="background-image: url(assets/imgs/Virtual.png); background-color: yellow" *ngIf="esVirtual(remota) == true && remota.estado_comunicacion == 'NO COMUNICA'"></div>

            <div class="avatar" style="background-image: url(assets/imgs/CompuertaClosed.png); background-color: green" *ngIf="esCompuerta(remota) == true && remota.estado_comunicacion == 'NORMAL'"></div>
            <div class="avatar" style="background-image: url(assets/imgs/Compuerta.png); background-color: rgb(0, 110, 255)" *ngIf="esCompuerta(remota) == true && remota.estado_comunicacion == 'NORMAL S'"></div>
            <div class="avatar" style="background-image: url(assets/imgs/Compuerta.png); background-color: red" *ngIf="esCompuerta(remota) == true && remota.estado_comunicacion == 'ALARMA'"></div>
            <div class="avatar" style="background-image: url(assets/imgs/Compuerta.png); background-color: yellow" *ngIf="esCompuerta(remota) == true && remota.estado_comunicacion == 'NO COMUNICA'"></div>

            <div class="avatar" style="background-image: url(assets/imgs/Nivel.png); background-color: green" *ngIf="esParcela(remota) == false && esVirtual(remota) == false && esCompuerta(remota) == false && remota.estado_comunicacion == 'NORMAL'"></div>
            <div class="avatar" style="background-image: url(assets/imgs/Nivel.png); background-color: rgb(0, 110, 255)" *ngIf="esParcela(remota) == false && esVirtual(remota) == false && esCompuerta(remota) == false && remota.estado_comunicacion == 'NORMAL S'"></div>
            <div class="avatar" style="background-image: url(assets/imgs/Nivel.png); background-color: red" *ngIf="esParcela(remota) == false && esVirtual(remota) == false && esCompuerta(remota) == false && remota.estado_comunicacion == 'ALARMA'"></div>
            <div class="avatar" style="background-image: url(assets/imgs/Nivel.png); background-color: yellow" *ngIf="esParcela(remota) == false && esVirtual(remota) == false && esCompuerta(remota) == false && remota.estado_comunicacion == 'NO COMUNICA'"></div>

            <div class="avatarLora" style="background-image: url(assets/imgs/Parcela.png); background-color: green" *ngIf="esParcela(remota) == true && remota.estado_comunicacion == 'NORMAL'"></div>
            <div class="avatarLora" style="background-image: url(assets/imgs/Parcela.png); background-color: rgb(0, 110, 255)" *ngIf="esParcela(remota) == true && remota.estado_comunicacion == 'NORMAL S'"></div>
            <div class="avatarLora" style="background-image: url(assets/imgs/Parcela.png); background-color: red" *ngIf="esParcela(remota) == true && remota.estado_comunicacion == 'ALARMA'"></div>
            <div class="avatarLora" style="background-image: url(assets/imgs/Parcela.png); background-color: yellow" *ngIf="esParcela(remota) == true && remota.estado_comunicacion == 'NO COMUNICA'"></div>
        </td>

        <td>
          <h2> {{ remota.descripcion }}</h2>

          <div>
            <label class="fechaFormato"> {{convertirFecha(remota.placas[0].variablesplaca[0].fecha)}}</label>
            <label *ngIf="remota.estado_comunicacion == 'NORMAL'" class="normal">NORMAL</label>
            <label *ngIf="remota.estado_comunicacion == 'NORMAL S'" class="normalS">NORMAL</label>
            <label *ngIf="remota.estado_comunicacion == 'ALARMA'" class="alarma">ALARMA</label>
            <label *ngIf="remota.estado_comunicacion == 'NO COMUNICA'" class="noComunica">NO COMUNICA</label>
          </div>
        </td>
      </tr>
    </table>

  </ion-item>
</ion-list>

Este código me crea la siguiente lista:

introducir la descripción de la imagen aquí

Mi problema es que, a través de firebase le envío un mensaje para cambiar el estado de comunicación de uno de los equipos (el estado de comunicación es lo que se ve en la imagen donde pone "NORMAL" en azul o verde y "ALARMA") pero no lo cambia hasta que no hago click en el elemento del listado. Es como si no actualizase la interfaz hasta que no haga click en el elemento.

Así es como gestiono la llegada del mensaje por firebase y como cambio el estado de comunicación:

this.fcm.onNotification().subscribe(data => {

  for(let i = 0; i< this.remotas.length; i++){
    if(this.remotas[i].idgrupo == data.idgrupo && this.remotas[i].idpropio == data.idpropio && this.remotas[i] != data.estado_comunicacion)
    {
      this.remotas[i].estado_comunicacion = data.estado_comunicacion;  //Aquí le cambio el estado_comunicacion
    }
  }

});

this.remotas es el array donde tengo todos los objetos. this.remsFiltradas son los objetos cuya descripción coincide con lo buscado en un campo de texto.

1 respuesta 1

1

Angular/Ionic tiene problemas al no "bindar" al ngIf directamente propiedades, puedes sustituir las condiciones y funciones creando un modelo con todos los datos que contiene remota y crear unas propiedades get que retornen un boolean con el resultado de las condiciones indicadas en tu código, con ello conseguirías tener una propiedad bindeable, ejemplo:

public get esParcelaNoComunica(): boolean {
   return esParcela(remota) == false && esVirtual(remota) == false && esCompuerta(remota) == false && remota.estado_comunicacion == 'NO COMUNICA';
}

Este getter para angular es una propiedad bindable que esta siendo observada continuamente.

El template quedaría algo así:

<table style="border: 0px; width: 100%">
  <tr>
    <td>
        <!--<img *ngIf="esVirtual(remota) == true" src="assets/imgs/Virtual.png" style="height: 10vh; width: 7vh;">-->
        <div class="avatar" style="background-image: url(assets/imgs/Virtual.png); background-color: green" *ngIf="remota.esVirtualNormal"></div>
        <div class="avatar" style="background-image: url(assets/imgs/Virtual.png); background-color: rgb(0, 110, 255)" *ngIf="remova.esVirtualNormalS"></div>

...

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.