Question

我正在构建一个包含背景（桌子）和四个玩家的小游戏。当我单击“下一步”时，我有两个按钮（下一个和上一个），我需要突出显示下一个播放器图标（用突出显示的一个替换旧图标）。默认突出显示的图标适用于player1。我正在考虑一种方法，可以检索下一个播放器以突出显示其图标。

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="bg-image">
  <ion-grid>
    <ion-row>
      <ion-col>
          <div class="player2" (click)="player2btn()">
            <br><br>
              <img src="assets/imgs/player-2.png" width=100 height=100 id="playert" name="playert">
          </div>
      </ion-col>
      <ion-col>

        <div class="playernamebox">
            <img src="assets/imgs/player name box.png">
        </div>
      </ion-col>
      <ion-col>
        <div class="player3" (click)="player3btn()">
          <br><br>
            <img src="assets/imgs/player-3.png"width=100 height=100>
        </div>
      </ion-col>

    </ion-row>
    <ion-row>
        <div *ngIf="hideme" class= "file" width=50 height=50>
            <img src="assets/imgs/file.png">
            <div class="player-description">{{playernum}}
              <img src="assets/imgs/ok btn.png">
            </div>

          </div>
    </ion-row>
    <ion-row>
    <ion-col>
        <div class="player1" (click)="player1btn()">
          <br><br>
            <img src="assets/imgs/player-1h.png" width=100 height=100>
        </div>
      </ion-col>
      <ion-col>
          <div class="player4" (click)="player4btn()">
            <br><br>
              <img src="assets/imgs/player-4.png"width=100 height=100>
          </div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
            <div class="previous">
              <br><br>
                <img src="assets/imgs/previous button.png"width=60 height=70>
            </div>
          </ion-col>
          <ion-col>
              <div class="next">
                <br><br>
                  <img src="assets/imgs/next button.png"width=60 height=70 ng-click="selectnext()">
              </div>
            </ion-col>
          </ion-row>



  </ion-grid>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController , NavParams} from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  hideme: boolean;
  name: string;
  playernum:string;
  player1flag: boolean;
  player2flag: boolean;
  player3flag: boolean;
  player4flag: boolean;
  id: number;


  player1btn(){
    this.playernum="P1";
    this.hideme= !this.hideme;

  }

  player2btn(){
    this.playernum="P2";
    this.hideme= !this.hideme;

  }
  player3btn(){
    this.playernum="P3";
    this.hideme= !this.hideme;

  }
  player4btn(){
    this.playernum="P4";
    this.hideme= !this.hideme;

  }
  nextbtn(){
    this.id=this.id+1;
    switch (this.id){
case 1:{

  break;
}
    }


  }

  constructor(public navCtrl: NavController,public NavParams:NavParams) {
this.player1flag =true;


  }


}

Answer 1

您可以在component.html中使用[class] =“ scopeVariable”。在您的component.ts文件中，根据与按钮单击相关的条件，将css类名称添加到“ scopeVariable”。

这将添加一个CSS类，该类将突出显示图标。存储玩家将在其中排列的回合中的回合，并像循环列表一样使用它们。

如何检索离子和角度2中的对象？

1 个答案: