Переключить этот элемент в ячейке таблицы материалов angular

Question

Я пытаюсь изменить стиль и увеличить количество избранных, проблема в том, что мой код меняет стиль для всех элементов сердца. Я пытался использовать индекс, например 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();
    }
  }

Скриншот проблемы; Вы можете видеть, что он меняет стиль для всех сердец при щелчке верхнего сердца, который изначально был черного цвета и меняет цвет на красный при клике.

Answer 1

Я использовал item.clicked, который использует итерацию элемента, нацеленную на щелчок ячейки таблицы сердца. Затем я переворачиваю логическое значение при нажатии item.clicked = !item.clicked;, используйте [ngClass]="{ red: item.clicked }", чтобы выбрать красный класс, если он равен true. Затем приращение в методе.

<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();
    }
  }