Html 单击时如何更改角度材质表中特定行的材质图标的颜色？

我有一个mat表，其中有列：Name和Plot

我尝试过的html、.ts和.css代码如下：

.html

.css

目前，如果我点击任何一行的图标，所有行中垫子图标的颜色都会改变，如果我第二次点击，所有行的颜色都会再次改变

我想更改我单击的特定行的mat图标的颜色，而不是所有行的mat图标颜色。如果我再次单击同一行图标，也可以将颜色更改回原始颜色

---

我如何才能做到这一点？

在您的

ts

文件中，请尝试

colorchange(signal) {
    signal.isActive = !signal.isActive;
  }

并在组件html文件中替换

[ngClass]="{'active': isActive}"

与

---

如需参考，请点击符号数据检查此项，它将更改特定行符号的颜色。

谢谢@farhat Zaman。这正是我想要的

.fa-heart {
  color: #ccc;
}

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

colorchange(signal) {
    signal.isActive = !signal.isActive;
  }

[ngClass]="{'active': isActive}"

[ngClass]="{'active': element.isActive}"