Angular Material Table 如何将一个图标反转成一行？

Question

我有一个垫子-table，每行有 3 个图标。其中一个图标是一个箭头，按下时会打开一个可扩展的行。我想在按下图标时反转图标，但只按下特定的图标，而不是所有行中的所有箭头。

我在布尔值上使用 ngClass 来反转箭头

HTML:

<div class="icon open" (click)="expand(element)" [ngClass]="isopened ? 'inverted':</div>

CSS:

.inverted {
transform: scaleY(-1);
}

TS:

  expand(element: any) {
    ...

    this.isopened = !this.isopened;
  }

如何只切换特定的点击图标？

Answer 1

根据您的评论，采用如下方式：https://stackblitz.com/edit/angular-vg4wcx?file=app%2Ftable-basic-example.html

1. 将另一个 属性 添加到元素的对象（我添加了 'isopened'）作为布尔值（最初设置为 false）。
2. 更改 ngClass 以检查 element.isopened 而不仅仅是 isopened，因为您只想检查该特定元素的状态。
3. 最后，在您处理图标扩展的方法中，使用 element 而不是 this，因为您是 checking/setting 您传递给方法，值为元素本身。

没有使用您的 div 组件详细信息，因为我不确定您是如何将它放入 table 结构中的，但这应该让您知道如何去做.