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

Question

我有一个带有列的垫表：名称和情节。

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

作为参考，在单击符号数据时检查此示例，它将更改特定行符号的颜色。