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

【问题标题】：How to change the color of the mat icon of a specific row in angular material table when clicked?单击时如何更改角度材料表中特定行的垫子图标的颜色？
【发布时间】：2021-02-15 00:11:04
【问题描述】：

我有一个带有列的垫表：名称和绘图。

我尝试过的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;
}

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

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

我怎样才能做到这一点？

【问题讨论】：

标签： html angular angular-material angular-material-5

【解决方案1】：

在您的ts 文件中尝试

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

并在您的组件 html 文件中替换

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

与

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

点击符号数据查看example作为参考，它将改变特定行符号的颜色。

【讨论】：

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