单击时如何更改角度材料表中特定行的垫子图标的颜色

Question

我有一个包含列的mat表：Name和Plot。

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

.html

<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- dataset Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Plot</th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button aria-label="Example icon button with a heart icon">
<mat-icon color=accent (click)="onSignalPreview(element); colorchange(element)">
<i class="fas fa-heart" [ngClass]="{'active': isActive}">preview</i>
</mat-icon>
</button>
</td>
</ng-container>

.ts

public isActive:boolean = false;
colorchange(signal) {
this.isActive = !this.isActive;
}

.css

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

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

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

我怎样才能做到这一点？

Answer 1

在ts文件中尝试

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

并在组件html文件中替换

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

带有

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

为了参考检查这个例子，点击符号数据，它将改变特定行的符号颜色。