在Angular中的单击事件中更改字体真棒图标的颜色？答案

【问题标题】：Change the color of a font awesome icon at a click event in Angular?在Angular中的单击事件中更改字体真棒图标的颜色？
【发布时间】：2021-08-11 23:54:27
【问题描述】：

我是Angular 的新手，我正在建立一个网站，每个项目都有一个愿望清单（星形字体真棒图标）。我的麻烦是当用户希望将项目添加到他们的愿望清单时（当click 事件发生时），我无法理解如何使用ngStyle 用yellow 填充图标颜色。这是我的HTML 代码与click 事件的一个部分：

<div id="wishlist" (click)="addToWishList(item)"><i class="fa fa-star-o fa-2x" aria-hidden="true"></i></div>

addToWishList(item) 函数在我的component 中定义，并且按预期工作。我确实尝试在<div> 的ngStyles 属性中提供颜色，但是，它预先设置了颜色，而不是在click 事件上。

任何帮助将不胜感激。谢谢！

【问题讨论】：

这个项目实际上是一个对象吗？我会根据你的情况用最佳实践来回答。
@Mohamed.Karkotly 是的，它是一个对象

标签： javascript html css angular

【解决方案1】：

使用ngStyle：

<i
  class="fa fa-star-o fa-2x"
  aria-hidden="true"
  [ngStyle]="{ color: THE_CONDITION_YOU_HAVE ? YOUR_NEEDED_COLOR : '' }"
></i>

使用[style.color]：

<i
  class="fa fa-star-o fa-2x"
  aria-hidden="true"
  [style.color]="THE_CONDITION_YOU_HAVE ? YOUR_NEEDED_COLOR : ''"
></i>

请注意，现在，Angular 团队建议您使用样式绑定，而不是 NgStyle，根据记录的 here：

NgStyle 指令可用作直接 [style] 绑定的替代方案。但是，最好使用前面没有 NgStyle 的样式绑定语法，因为由于 Angular 中样式绑定的改进，NgStyle 不再提供重要的价值，并且最终可能会在未来被删除。

【讨论】：

【解决方案2】：

因此，如果您将此项目显示为一个对象，并且在某处使用interface 或class 预定义，您可以继续您的项目interface/class 并添加一个参数（比如说你叫它selected)

现在您必须在您的模板中进行以下调整

<div id="wishlist" (click)="addToWishList(item)">
  <i [ngStyle]="{ color: item.selected ? yourColor : '' }" class="fa fa-star-o fa-2x" aria-hidden="true"></i>
</div>

addToWishList() 函数会是这样的

addToWishList(item: Item) {
    this.item.selected = !this.item.selected;
    //Your code here
}

这实际上可以让您切换项目的状态，因此单击会将其添加到白名单中，再次单击会将其从白名单中删除（作为一种样式），并且需要额外的处理才能将其从白名单中实际删除数组。

【讨论】：