Angular - 单击时更改 Font Awesome 图标颜色

2024-01-24

我使用以下 HTML 创建了一个名为“like”的组件:

<div (click)="onClick()">
   <i class="fas fa-heart" [class.active]="isActive"></i>
</div>

当我单击图标时,它应该更改变量“isActive”,因此图标的颜色也应该改变。这是.ts:

onClick() {
    this.isActive = !this.isActive;
  }

CSS:

.fa-heart {
    color: #ccc;
}

.fa-heart.active {
    color: deeppink;
}

但是,当我单击时,“活动”类不会被添加或删除。为什么?


您应该使用以下语法:

<div (click)="onClick()">
   <i class="fas fa-heart" [ngClass]="{'active': isActive}"></i>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular - 单击时更改 Font Awesome 图标颜色 的相关文章

随机推荐

  • 使用一个 LINQtoSQL 语句返回不同的对象

    我有一个由员工和学生实施的IPerson 我什么really想要的就是你在下面看到的 一个 LINQ 语句即可获取每种类型的 IPerson 在我调用该方法之前 这非常有效 为什么我会收到错误 这是有道理的 但我真的很难找到一种合适的方法来
  • 如何使用 CSS 和 JavaScript 制作可更改的主题

    我对 CSS 和 JavaScript 还很陌生 我想知道您是否可以制作一个脚本来更改网站使用的样式表 说 你有一个绿色主题 所有东西都是绿色的 您会怎么做 以便用户可以通过按下按钮将其更改为红色 有谁知道如何做到这一点 您可以为链接标签设
  • 创建游戏插件时出现 SerpentAI 错误

    我最近安装了 SerpentAI 但在创建游戏插件时遇到了问题 运行命令时 serpent generate game 我提供以下答案 RaftWars 网页浏览器 What is the name of the game Titleize
  • 如何将跟踪信息保存到文件中

    我正在通过启用跟踪来跟踪我的 ASPX 页面web config
  • 何时对片段使用 onCreateView?

    我正在按照以下步骤操作 http developer android com training basics fragments creating html AddInLayout http developer android com tr
  • “Image Literal”命令在 Xcode 中不起作用

    我开始学习 swift 语言 有一个命令 Image Literal 可以添加图像 但它没有显示任何内容 除此之外 如果我尝试任何其他编码 它会自动得到建议 但图像文字根本不起作用 我正在使用 Xcode 13 任何线索都会非常有帮助 对于
  • Blazor客户端发送电子邮件

    我在 Razor 页面中包含了一个联系表单 以便用户可以在其中填写他的电子邮件 主题和正文 当他提交时 电子邮件会发送到我的电子邮件地址 我的代码看起来像这样example https learn microsoft com fr fr d
  • 为什么 C++11 允许 GC? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Swift - 查找字符串中两个位置之间的子字符串

    我有一个格式如下的字符串 XbfdASF FBACasc Piida bfedsSA XbbnSF vsdfAs 基本上它是一个 ID ID 然后又重复 我有第一个 ID 我需要找到它的合作伙伴示例 我有 Piida 我需要找到 之后紧随其
  • php 中的 mkdir() 将文件夹权限设置为 755 但我需要 777?

    我试图使用 php 在我的服务器上创建一个文件夹 当我将其设置为 0777 时 它显示为 755 mkdir create path 0777 谢谢 尝试这个 old umask umask 0 mkdir create path 0777
  • MongoDB $lookup 对带有引用 objectId 的对象数组进行查找

    我有订单集合 我正在从中获取数据 如下所示 id 628216b7b30bb8aa80c8fd1a promotionsDetails companyTotalPrice 27 promotionsData id 621de063bb5f9
  • 如何从函数标记的页面源代码中获取值?

    这是源代码中的函数 function dosubmit if getObj Frm Username value getObj errmsg innerHTML Username cannot be empty getObj myLayer
  • Android 互联网连接检查更好的方法

    根据 Android 开发者网站 确定和监控连接状态 https developer android com training monitoring device state connectivity monitoring html 我们可
  • ggplot2:scale_alpha() 的阈值

    是否可以指定色标的阈值 看这个例子 xy lt expand grid x 1 20 y 1 20 xyd lt data frame xy z runif 400 a rowSums xy 40 g lt ggplot xyd aes x
  • SharePoint 2007:如何限制字段级别的访问?

    是否可以在 SharePoint 2007 列表 MOSS 尽管我不认为这是企业版 中允许一个 SharePoint 组中的用户编辑某些字段中的值 而另一组中的用户编辑其他字段中的值 从我所做的所有搜索来看 这似乎是不可能的 因此作为后备
  • 当我们使用核心数据时,我们应该创建模型类吗?

    我正在开发一个 iPad 应用程序 如果用户无法访问互联网 则需要我在本地存储数据 然后与后端数据库同步 对于本地存储 我计划将 Core Data 与 SQLite 结合使用 我第一次使用 Core Data 它似乎检索实体并以字典的形式
  • 我需要一种人类可读且可解析的文档格式

    我正在从事其中一个项目 其中有一百万种更好的方法来完成我所需要的 但我别无选择 我必须这样做 这里是 有一个网络表单 当用户填写并点击提交时 将使用表单数据创建人类可读的文本文件 它看起来像这样 field 1 value for fiel
  • 将文件上传到 Google Cloud Storage:500 后端错误

    我们尝试将文件上传到 Google Cloud Storage 然后再将其移至 BigQuery 但在某些上传过程中 我们经常遇到 500 内部服务器错误 或 410 消失 原始消息如下 我们使用的是官方 SDK 并添加了指数退避重试 但错
  • - 声明时变量的默认值 -

    我想知道在初始化变量之前变量的默认值是什么 例如 如果我这样做 myClass h BOOL myBOOL default value NSArray myArray default value NSUInteger myInteger d
  • Angular - 单击时更改 Font Awesome 图标颜色

    我使用以下 HTML 创建了一个名为 like 的组件 div i class fas fa heart i div 当我单击图标时 它应该更改变量 isActive 因此图标的颜色也应该改变 这是 ts onClick this isAc