配列内の選択されたアイテムをハイライトし、循環します

私はこれを持っています"ゲームボード" 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>