bugfix> angular > 投稿

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

回答 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要素に割り当てられます。

あなたの答え