私はこれを持っています"ゲームボード" 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 件
関連記事
- Reactでdivタグ内の配列の要素を1つずつ循環させるにはどうすればよいですか?
- Axios&Reactを介してアレイに追加
- 子(親ではない)ノードに基づくオブジェクトの配列をループする
- Javaでループするときに、配列リストから何かを削除するにはどうすればよいですか?
- 文字列と配列をCの構造体に渡す
- 多次元配列をスクロールします
- オブジェクトの配列をループし、日付が現在の月であるかどうかに基づいてフィルタリングします
- Map inReactスローエラーを使用して配列をループします
- ユーザーが選択した次元で配列を作成する
- ネストされた配列とオブジェクトを使用してオブジェクトの配列を反復処理し、独自のオブジェクトを追加します
関連した質問
- このHTTP応答からオブジェクトのプロパティを取得する方法
- Primengテーブルをダブルクリックする代わりに、セル編集のためにシングルクリックでセルテキスト全体を選択します
- ネストフィルターは問題ありません
- 元のサービスオブジェクトでも代替のサービスオブジェクトを変更する
- さまざまなコンポーネントからの角度イベント
- コンポーネントからのNGRXシークシャルコールアクション
- オブジェクトから異なるプロパティを取得する方法は?
- 「すべて選択」を選択すると、angular2-multiselect-dropdownでonDeSelectAllイベントも発行されます。
- Observable TextArea defaultValueは、sendMessage SignalR&Typescript/angularの後の空白です
- IPのAngularMaterialテーブルソートリスト
簡単なバインディングでクラスを簡単に割り当てることができます。
クラス「selected」は、参加者が選択されるたびにdiv要素に割り当てられます。