2

Estoy intentando cambiar el color de un button cuando se hace click, he conseguido que se cambie todos los button pero no consigo que solo se cambie al que hago click.

.html

<ion-content padding>


 <button #button1 [color]="myColor" ion-button outline round class="text-on-
  bottom" (click)="falta($event)">
  <ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
   <p>Jose Yeste</p>
   </button>
  <button #button2 [color]="myColor" ion-button outline round class="text-
  on-bottom" (click)="falta($event)">
  <ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
   <p>Name</p>
    </button>
   <button #button3 [color]="myColor" ion-button  outline round class="text-
  on-bottom" (click)="falta()">
  <ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
  <p>Namme</p>
   </button>
    <button #button4 [color]="myColor" ion-button  outline round class="text-on-bottom" (click)="falta()">
   <ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
   <p>AName</p>
   </button>
  <button #button5 [color]="myColor"     ion-button  outline round class="text-on-bottom" (click)="falta()">
  <ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
  <p>Name</p>
   </button>
  </ion-content>

.ts

   @Component({
   selector: 'page-list-alumnos',
   templateUrl: 'list-alumnos.html',
  })
  export class ListAlumnosPage {
   private myColor = 'dark';
   private colors = ['dark', 'falta', 'retraso'];
   private cont = 0;
    constructor(public navCtrl: NavController, public navParams: NavParams)  
{
 }




 ionViewDidLoad() {
    //console.log('ionViewDidLoad ListAlumnosPage');

  }


  falta(){
    console.log();
    this.cont++;
   this.cont=(this.cont%this.colors.length)
    this.myColor = this.colors[this.cont];
    console.log(this.myColor);
   }

   }

1 respuesta 1

1

Dado que son varios buttons, lo único que habría que cambiar es que la variable myColor en lugar de ser solo un string, debería ser un arreglo de strings (un string por cada color).

Te pido que mires éste plunker para ver una forma de hacerlo.

En dicho plunker, cambio la variable myColor para que sea un arreglo de colores, y actualizo el método falta() para que reciba el índice del botón que fue clickeado (para poder cambiar el color de sólo ese botón).

@Component({...})
export class HomePage {

   public myColor = ['dark', 'dark', 'dark', 'dark', 'dark'];
   public colors = ['dark', 'falta', 'retraso'];
   public cont = 0;

  constructor() {}

  falta(index: number){
    this.cont++;
    this.cont=(this.cont%this.colors.length)
    this.myColor[index] = this.colors[this.cont];
   }

}

Luego en la vista, a cada botón le asigno el string dentro de la variable myColor que le corresponde y agrego el índice como parámetro cuando se llama a la función falta(...):

<ion-content padding>

  <button #button1 [color]="myColor[0]" ion-button outline round class="text-on-bottom" (click)="falta(0)">
    <p>Jose Yeste</p>
  </button>
  <button #button2 [color]="myColor[1]" ion-button outline round class="text-on-bottom" (click)="falta(1)">
    <p>Name</p>
  </button>
  <button #button3 [color]="myColor[2]" ion-button  outline round class="text-on-bottom" (click)="falta(2)">
    <p>Namme</p>
  </button>
  <button #button4 [color]="myColor[3]" ion-button  outline round class="text-on-bottom" (click)="falta(3)">
    <p>AName</p>
  </button>
  <button #button5 [color]="myColor[4]" ion-button  outline round class="text-on-bottom" (click)="falta(4)">
    <p>Name</p>
  </button>

</ion-content>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.