0

espero que alguien me ayude con esta implementación, ya que es una ayuda visual para mis usuarios. Tengo una app que estoy desarrollando el cliente mediante ionic 5(angular 8), y al intentar el codigo siguiente, me resulta, pero en consola depurando linea a linea me di cuenta que la funcion que da color al text, está siendo llamada mas de 90 veces y mi array "items", solo tiene 3 item, no me quiero imaginar cuando implemente esto con el servicio que me trae los datos, y ver como colapsa el browser por tantas iteraciones... existe alguna otra forma de hacer este cambio?, intenté con un ngClass pero también se llama a la función mas de 20 veces con los mismos 3 item. Saludos y espero que me ayuden.

<ion-col *ngFor="let item of items">
 <ion-text [color]="funcion(item.fecha)">{{item.fecha}}</ion-text>
</ion-col>

aqui está el codigo de la funcion

funcion(elem){
//comparo elem con otro valor 
const ahora = new Date();
const fecha = new Date(ahora.setDate(ahora.getDate()+5));
if(elem > fecha){
   return 'light';
}else{
  return 'danger';
}
}

aqui esta el array

items = [
{   ...
    fecha: new Date(2020,6,12)
    ...
},
{   ...
    fecha: new Date(2020,5,25)
    ...
},
{   ...
    fecha: new Date(2020,6,30)
    ...
}
]

1 respuesta 1

0

Para evitar que se calcule cada vez, podrías primero actualizar tu array items y agregarle una nueva property a cada objeto.

Luego ya le pasaras a Angular el array de objetos indicando que color utilizar en cada elemento, por lo cual no necesitarás llamar a la función cada vez.

function eligeColor(elem){
  //comparo elem con otro valor 
  const ahora = new Date();
  const fecha = new Date(ahora.setDate(ahora.getDate()+5));
  if(elem > fecha){
     return 'light';
  }else{
    return 'danger';
  }
}

var items = [
{   
    fecha: new Date(2020,6,12)
    
},
{   
    fecha: new Date(2020,5,25)
    
},
{   
    fecha: new Date(2020,6,30)
   
}
];



for (let i=0; i < items.length; i++) {
  items[i].color = eligeColor(items[i].fecha);
}

console.log(items)

2
  • pero tendría que modificar el array completo, si es así podría pasar todo la logica del color al backend y asi me trae la propiedad lista y solo tengo que interpolarla, pero quería ver si se puede como logica de front. Commented el 21 may. 2020 a las 22:42
  • Lo que yo hice lo hice con JS, asi que se puede hacer en el front. No tienes que modificar el array original necesariamente, puedes hacer una copia. La llamada al a funcion la haras de todas maneras para cada elemento, la diferencia es si lo aplicas al principio o dejas que Angular la llame por ti.
    – Pablo CG
    Commented el 21 may. 2020 a las 23:07

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.