Выделите выбранный элемент в массиве и пролистайте

Question

У меня есть "игровая доска" , которая имитирует игру DnD.Это пошаговый, но эти 5 уже отсортированы (слева направо) по определенному значению.Но теперь я хотел бы выделить игрока, который его разыграл, и использовать те кнопки «следующий» и «предыдущий», чтобы перебрать его.Вот что у меня есть:

<div class="heroWrapper">
 <div class="image hero" *ngFor="let participant of participants">
  <img [src]="participant.imageUrl"/>
  <span class="HP">{{participant.hitPoints}}</span>
  <span class="namePlayer" *ngIf="isHero(participant)"> 
  {{getPlayerName(participant)}}</span>
  <span class="nameHero">{{participant.name}}</span>
 </div>
</div>

selectedParticipant: number = 0;

next(){
++this.selectedParticipant;
}

previous(){
if(this.selectedParticipant != 0){
  --this.selectedParticipant;
} else {
  this.selectedParticipant = this.participants.length -1;
 }
}

Я связал его с помощью ngClass, но ничего не показывал:

<div class="heroWrapper">
 <div class="image hero" *ngFor="let participant of participants; index as i">
  <img [src]="participant.imageUrl" [ngClass]="{selected: 
  selectedParticipant  == participant[i]}"/>
  <span class="HP">{{participant.hitPoints}}</span>
  <span class="namePlayer" *ngIf="isHero(participant)"> 
  {{getPlayerName(participant)}}</span>
  <span class="nameHero">{{participant.name}}</span>
 </div>
</div>

Редактировать

Решение какпредоставлено qUest, немного изменено из-за моего CSS беспорядка:

<div class="heroWrapper">
 <div class="image hero" *ngFor="let participant of participants; index as 
 i" [class]="i === selectedParticipant ? 'selected hero' : 'image hero'" >
 <img [src]="participant.imageUrl" />
 <span class="HP">{{participant.hitPoints}}</span>
 <span class="namePlayer" *ngIf="isHero(participant)"> {{getPlayerName(participant)}}</span>
 <span class="nameHero">{{participant.name}}</span>
 </div>
</div>

Answer 1

Вы можете легко назначить класс с простой привязкой:

// compare with participant
<div *ngFor="let p of participants" [class.selected]="p === selectedParticipant">
    ...
</div>

// compare with number
<div *ngFor="let p of participants; let i = index" [class.selected]="i === selectedParticipant">
    ...
</div>

Класс "selected" будет назначен элементу div при выборе участника.