仅使用css或ngClass在单击时更改图标

嘿，伙计们，我试图在单击时更改图标，但我只找到了jquery的示例。我想知道是否可能只使用css或ngClass，因为我在一个Angular项目中工作。我使用的是FontAwesome5和Bootstrap4。下面是我为实现我的目标而写的代码

HTML:

---

我想要实现的是更改单击按钮上的图标，并更改传递给函数的参数类型，以显示刚刚写入的密码。

我仅提供一个使用

css

的示例。希望对你有帮助

html

---

下面是一个工作示例

更新

这样使用,

<span class="input-group-text"><i [ngClass]="toggle2 ? 'fa fa-eye' : 'fa fa-eye-slash'"></i></span>

难道你不能使用

ngIf

并有两个元素，每个图标一个元素吗？如果可能的话，我更喜欢像我写的那样使用ngClass或css。如果没有其他方法，那么我将尝试您的方法try

[ngClass]=“{'fas-fa-eye'：toggle2，'fas-fa-eye-slash'：！toggle2}”

@Gabax它有帮助吗？（查看上面的评论…）它像以前一样工作。当我点击跨度时，眼斜线变成了一个空白的正方形对不起，我没有看到带有图标的跨度，所以它不是testable@Gabax现在检查一下。添加引导和字体后，我忘记了保存。对不起，你换了什么？我看不出我的代码有什么不同，但是类fas变成了faI使用的FontAwesome4.7，这是主要的区别。但是我想使用FontAwesome5。我必须改变什么？我安装它是为了使用免费图标：我必须将标记输入放在其他标记输入中吗？不需要这样做，您可以直接运行此代码示例。

toggle1: boolean = false;
toggle2: boolean = false;

changeType(password, num){
  if(password.type=="password")
    password.type = "text";
  else
    password.type = "password";

  if(num == 1)
    this.toggle1 = !this.toggle1;
  else
    this.toggle2 = !this.toggle2;
}

<input type="checkbox" />

input[type="checkbox"] {
    width: 0;
    height: 0;
    margin: 0;
    border: 0 none;
    padding: 0;
}
input[type="checkbox"]:before {
    content: url('http://placekitten.com/200/210');
    display: block;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
input[type="checkbox"]:checked:before {
    content: url('http://placekitten.com/210/220');
}

<span class="input-group-text"><i [ngClass]="toggle2 ? 'fa fa-eye' : 'fa fa-eye-slash'"></i></span>