在材料表单元格角度切换此元素答案

【问题标题】：Toggle this element on material table cell angular在材料表单元格角度切换此元素
【发布时间】：2020-01-20 11:26:45
【问题描述】：

我正在尝试更改样式并增加收藏夹计数，问题是我的代码更改了所有心脏元素的样式。我试过使用像favClicked === i 这样的索引，但是当你点击另一颗心时，它会禁用上次点击的样式。

我的代码：

<td mat-cell *matCellDef="let item; let i = index" class="favorite">
          <mat-icon
            (click)="showRed = true; increment(showRed)"
            *ngIf="!showRed"
            >favorite</mat-icon
          >
          <mat-icon
            (click)="showRed = false; increment(showRed)"
            class="red"
            *ngIf="showRed"
            >favorite</mat-icon
          >
        </td>

...

increment(showRed: boolean) {
    console.log(showRed);
    if (showRed) {
      this.childComponent.incrementCount();
    } else {
      this.childComponent.decrementCount();
    }
  }

问题截图；您可以看到它在点击顶部心形时更改了所有心形的样式，最初是黑色，点击时变为红色。

【问题讨论】：

标签： javascript angular angular-material angular-ng-if angular-material-table

【解决方案1】：

我使用了item.clicked，它使用了项目迭代，它针对心脏的表格单元格点击。然后我在单击item.clicked = !item.clicked; 时反转布尔值，如果为真，则使用[ngClass]="{ red: item.clicked }" 选择红色类。然后在方法中递增。

<td mat-cell *matCellDef="let item; let i = index" class="favorite">
   <mat-icon (click)="item.clicked = !item.clicked; increment(item.clicked, item, i)"
   ngClass]="{ red: item.clicked }">favorite</mat-icon>
</td>

...

 increment(item: boolean) {
    if (item) {
      this.childComponent.incrementCount();
    } else {
      this.childComponent.decrementCount();
    }
  }

【讨论】：