2

Tengo el siguiente problema que no se como solucionarlo, en mi aplicación se usa web components a los cuales no puedo cambiar su comportamiento, estoy utilizando un componente tab con el cual puedo definir cada cabecera del tab en donde lo utilice, en la imagen a continuación se usa 3 veces el tab para poder mostrar "london" "paris" "tokio", como se puede ver "london" esta seleccionado por lo tanto puedo ver su contenido, esto se manipula en el tab de "London" con la propiedad "active" que puede ser true o false, en este caso solo que "active = true".

Como se puede ver en el contenido hay activos e inactivos, el valor numérico de cada uno de estos lo tengo definido en el .TS en una variable, puede darse el caso que por ejemplo "london" no tenga activos o inactivos o ninguno de los 2, esto aplica también para los otros tabs que tienen el mismo contenido pero se guarda cada uno en sus respectiva variables.

De acuerdo a lo comentado lo que quiero realizar es lo siguiente, por ejemplo digamos que parís y tokyo tienen activos e inactivos con la propiedad active podría hacer algo así

[active]="activosParis.length > 0 || inactivosParis.length > 0 ? true:false"

Lo que quiero hacer es que este seleccionado si tiene activos o inactivos si no tiene ninguno no debe seleccionarse.

Con esto esto estaría indicando si hay contenido activo o inactivo en Paris este tab pase a ser true por lo tanto seria el seleccionado pero digamos que Tokyo también tiene activos e inactivos y realizo el mismo tipo de validación con la propiedad active, este también seria true, y esto generaria un conflicto el cual tengo actualmente al ser estos dos tabs true al ejecutar la aplicación a veces el seleccionado es parís o Tokio y no debería funcionar así, lo que quiero hacer es lo siguiente poder definir un orden, por ejemplo: "london" no tiene activos ni inactivos , pero "paris" y "tokio" si tienen activos o inactivos, el seleccionado sea "PARIS" por un tema de orden, al encontrarse antes que Tokio en las cabeceras, por más que ambos tengan contenido

Imagen

1 respuesta 1

0

primero podrias definir una prioridad en un arreglo por ejemplo:

const priority = ["london","paris","tokyo"];

adicional define una variable para guardar el valor inicial de la prioridad":

var countryIndexPriority = 0;

y podrías crear un método que valide la posicion del pais en el arreglo de prioridades y dependiendo de esto retornas un true o un false;

validatePriority(pais: string){
  const index = priority.findIndex(country => country === pais);
  if(index < countryIndexPriority){
   countryIndexPriority = index;
   return true;
  }
  else{
   return false;
  }
}

luego en el html haces:

[active]="activosParis.length > 0 || inactivosParis.length > 0 ? validatePriority(pais):false"

aunque lo ideal seria definir cual estará activo desde antes, si colocas como es la estructura de datos que recibes donde vienen los paises te podría ayudar mejor.

4
  • Gracias por la respuesta! , una pregunta mencionas que debo colocar un arreglo pero digamos ese arreglo no esta referenciado a las cabeceras de cada tab entonces me parece no tomaria en cuenta la validación al ejecutar
    – Maiki
    el 2 sep. 2021 a las 16:00
  • y tambien es importante mencionar que cada cabecera del tab, estan de forma independiente por lo tanto cada uno tendra su propiedad [active]
    – Maiki
    el 2 sep. 2021 a las 16:03
  • asi como para paris hay activosParis e inactivosParis, los demás paises también tienen sus propias variables.
    – Maiki
    el 2 sep. 2021 a las 16:06
  • osea tienes por aparte cada propiedad activos e incativos de cada pais ? y solo tienes esos paises , siempre seran los mismos o puede varias dependiendo de algún consumo ?
    – GOBLIK
    el 3 sep. 2021 a las 14:05

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.