1

tengo el siguiente detalle, tengo el siguiente código que muestro en una tabla, hasta ahí todo bien, el detalle es que quiero aplicar una condición, pero no sé cómo hacerlo, lo que quiero es que cuando en mi array o iteración clave_programa tenga todos los valores este muestre un texto y si no lo cumple este muestre la lista como tal.

En clave programa muestro los 9 programas de estudio [TSGH,GA,TAGP,IA,IDeIO,IL,IE,NI,GPPF]

Tengo lo siguiente en mi tabla:

<td>
                        <div *ngFor="let clave of Proyecto.j_programa" class="listar_programas">
                            <span>{{clave.clave_programa+','}}</span>
                        </div>

Intente hacer esta condición pero se me bugea la tabla y no me muestra nada los otros campos

<span *ngIf="clave.clave_programa.lenght === clave.clave_programa.lenght ? 'Todos' : clave.clave_programa">{{clave.clave_programa}}</span>

Ya intente aplicar la función count(clave.clave_programa) pero no me lo reconoce y no me imprime nada en consola.

Igual cuando muestro la lista le agrego una coma para separarlo, pero lo ideal es que si muestra 1 clave no muestre el coma y si muestra varios el final sea un punto final.

2
  • el ngFor de todas formas te va a listar todos los datos... no creo que haya caso de que no liste todos los datos para que dicha condición se cumpla... Commented el 23 oct. 2022 a las 14:07
  • si me lista los datos pero el usuario al final no quiere que se muestre la lista completa si no quiere que si estan todos esos le muestre todos y si falta uno muestre la lista, de igual forma el detalle que tengo es el mostrar el separador (coma) y el ultimo elemento poner punto final, si es un solo elemento no ponerle nada
    – oscarggh
    Commented el 23 oct. 2022 a las 14:20

2 respuestas 2

1

Puedes utilizar la propiedad index de ngFor para comparar la longitud actual del arreglo con un valor deseado. En este caso utilizo el mismo, pero puedes sustituirlo por un valor fijo.

<div
  *ngFor="let clave of clave_programa; let i = index"
  class="listar_programas"
>
  <span>{{ clave + ',' }}</span>
  <span *ngIf="i === clave_programa.length - 1">todo</span>
</div>

Te dejo un ejemplo funcional aquí

Actualización

Puedes utiliza las etiquetas ng-container:

<ng-container *ngIf="9 > clave_programa.length">
  <div
    *ngFor="let clave of clave_programa; let i = index"
    class="listar_programas"
  >
    <span>{{ clave + ',' }}</span>
  </div>
</ng-container>

<ng-container *ngIf="clave_programa.length == 9"> TODO </ng-container>


Te dejo otro ejemplo funcional aquí

2
  • amigo @legna como le hago para que me aprezca alguno de los dos? y no los dos al mismo tiempo, osea que se estan todos me parezca todos y fi falta uno me aparezca el listado??
    – oscarggh
    Commented el 24 oct. 2022 a las 15:41
  • Puedes revisar mi respuesta de nuevo @oscarggh.
    – Legna
    Commented el 24 oct. 2022 a las 16:24
0

Lo resolví de la siguiente manera, lo único que no puedo resolver es lo de la coma al final que en vez de coma sea un punto. :(

<div *ngFor="let clave of Proyecto.j_programa; let i = index" class="listar_programas">
<span pTooltip="{{clave.programa}}" tooltipPosition="bottom" class="font-bold" *ngIf="Proyecto.j_programa?.length < 9">{{clave.clave_programa+', '}}</span>
<span pTooltip="[TSGH, GA, TAGP, IA, IDeIO, IL, IE, NI, GPPF]" tooltipPosition="bottom" class="font-bold" *ngIf="i === Proyecto.j_programa?.length - 1 && Proyecto.j_programa?.length >= 9">Cualquier programa educativo</span>
</div>

Gracias por ayudarme amigo @Legna me ayudo muchísimo tu código.

1
  • Para lo del punto puedes utilizar la misma idea. Si es el último elemento del arreglo, entonces pones la coma, y no el punto (con ng-container)
    – Legna
    Commented el 24 oct. 2022 a las 16:25

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.