How to update ion-item in an ion-list

Question

How to update ion-item in an ion-list

Navigation

#1 by (1 votes)

3

Good morning community.

I have had the following problem for several days and I can not find a way to solve it.

I have an array of objects with their properties, which I show in with an ion-list. I present the listing in the HTML as follows:

<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>

This code creates the following list:

My problem is that, through firebase I send a message to change the communication status of one of the computers (the communication status is what you see in the image where it says "NORMAL" in blue or green and "ALARM") but it does not change it until I click on the item in the list. It's as if you did not update the interface until you click on the element.

This is how I manage the arrival of the message by firebase and how I change the communication status:

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 is the array where I have all the objects. this.remsFiltered are the objects whose description matches what is searched in a text field.

html lista typescript ionic

asked by Pablo Simon DiEstefano 27.11.2018 в 08:44

source

1 answer

Add index to associative array in php Compare Data in Oracle

score 1 · Answer 1

Angular / Ionic has problems not to "bin" to ngIf directly properties, you can substitute the conditions and functions creating a model with all the data that contains remota and create get properties that return a boolean with the result of the conditions indicated in your code, with this you would have a bindeable property, example:

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

This getter for angular is a bindable property that is being continuously observed.

The template would look something like this:

<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>

...