Soy nuevo en Angular y estoy creando un sitio web con una lista de deseos para cada elemento (icono impresionante de fuente de estrella). Mi problema es que no puedo entender cómo usar ngStyle para llenar el color del ícono con yellow cuando un usuario desea agregar el elemento a su lista de deseos (cuando ocurre el evento de click ). Esta es una parte de mi código HTML con el evento de click :
<div id="wishlist" (click)="addToWishList(item)"><i class="fa fa-star-o fa-2x" aria-hidden="true"></i></div> La addToWishList(item) está definida en mi component y funciona como se esperaba. Traté de proporcionar el color en el atributo ngStyles en <div> sin embargo, establece el color de antemano en lugar de en el evento de click .
Cualquier ayuda será apreciada. ¡Gracias!
Usando ngStyle :
<i class="fa fa-star-o fa-2x" aria-hidden="true" [ngStyle]="{ color: THE_CONDITION_YOU_HAVE ? YOUR_NEEDED_COLOR : '' }" ></i> Usando [style.color] :
<i class="fa fa-star-o fa-2x" aria-hidden="true" [style.color]="THE_CONDITION_YOU_HAVE ? YOUR_NEEDED_COLOR : ''" ></i> Tenga en cuenta que hoy en día, el equipo de Angular le recomienda usar enlaces de estilo en lugar de NgStyle como se documenta aquí :
La directiva NgStyle se puede usar como una alternativa a los enlaces directos [estilo]. Sin embargo, se prefiere usar la sintaxis de enlace de estilo anterior sin NgStyle porque, debido a las mejoras en el enlace de estilo en Angular, NgStyle ya no proporciona un valor significativo y es posible que se elimine en el futuro.
Entonces, si tiene este elemento que está mostrando como un objeto, y está predefinido con una interface o una class en algún lugar, puede continuar con la interface / class de su elemento y agregar un parámetro (digamos, por ejemplo, que lo llame selected )
Ahora en tu plantilla tienes que hacer el siguiente ajuste
<div id="wishlist" (click)="addToWishList(item)"> <i [ngStyle]="{ color: item.selected ? yourColor : '' }" class="fa fa-star-o fa-2x" aria-hidden="true"></i> </div> La función addToWishList() sería algo como esto
addToWishList(item: Item) { this.item.selected = !this.item.selected; //Your code here }esto realmente le permitiría alternar el estado del elemento, por lo que un clic lo agregaría a la lista de deseos, otro clic lo eliminaría de la lista de deseos (como un estilo) y se requiere un procesamiento adicional para eliminarlo realmente de la matriz de la lista de deseos.