单击时如何更改 angular material table 中特定行的垫子图标的颜色？

Question

我有一个 mat-table 列：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}"

作为参考，检查此 example 点击交易品种数据，它会改变特定行交易品种的颜色。

单击时如何更改 angular material table 中特定行的垫子图标的颜色？

How to change the color of the mat icon of a specific row in angular material table when clicked?

html

angular

angular-material

angular-material-5