angular - Angular on icon click 切换类名或类名的一部分

Question

我正在使用 Angular 11，在我的 component.html 文件中我有一个图标：

<i class="fa fa-eye" aria-hidden="true"></i>

我需要做的是当我点击它时切换类。

我需要在以下之间切换：

<i class="fa fa-eye aria-hidden="true"></i>

和

<i class="fa fa-eye-slash aria-hidden="true"></i>

我怎样才能做到这一点？

Answer 1

.ts 文件：

@Component
export class YourComponent extends ... {
   toggle:boolean = false; // add any public variable
}

.html 文件：

<i [ngClass]="toggle ? 'fa-eye' : 'fa-eye-slash'" class="fa" aria-hidden="true"
(click)="toggle = !toggle"></i>