1

Quiero que al hacer el click el background-color de mi div se cambie para saber que he está pulsado, el problema que me encuentro es que al ser un *ngFor si cambio el color del div al pulsar se me cambia en todos

<div class="col-md-6 card">
            <div class="card-header-submenu">
                <span><i class="fas fa-calendar-alt"></i> Visitas</span> 
            </div>
            <div class="card-body-citas">
                <div *ngFor='let fhistoria of historial' class="visitas mt-1" (click)="modificate(false);modificarci(true);auxHistorial(fhistoria.datos,fhistoria.fecha,fhistoria.hora)">
                    <span>{{fhistoria.fecha}} - {{fhistoria.hora}}</span>
                </div>
            </div>
</div>

Así es como se ve

introducir la descripción de la imagen aquí

1
  • ¿Puedes compartir el código de la función que realiza el cambio de color de fondo? Commented el 14 jun. 2019 a las 9:06

2 respuestas 2

2

Te recomiendo usar sólo una función en el evento `click, pasando de esto:

<div class="col-md-6 card">
  <div class="card-header-submenu">
    <span><i class="fas fa-calendar-alt"></i> Visitas</span> 
  </div>
  <div class="card-body-citas">
    <div *ngFor='let fhistoria of historial' class="visitas mt-1" 
          (click)="modificate(false); modificarci(true);auxHistorial(fhistoria.datos,fhistoria.fecha,fhistoria.hora)">
      <span>{{fhistoria.fecha}} - {{fhistoria.hora}}</span>
    </div>
  </div>
</div>

a esto:

<div class="col-md-6 card">
  <div class="card-header-submenu">
    <span><i class="fas fa-calendar-alt"></i> Visitas</span> 
  </div>
  <div class="card-body-citas">
    <div *ngFor='let fhistoria of historial' class="visitas mt-1"
        (click)="onFHistoriaClicked(fhistoria)">
      <span>{{fhistoria.fecha}} - {{fhistoria.hora}}</span>
    </div>
  </div>
</div>

con un método en el componente así:

onFHistoriaClicked(fhistoria) {
  modificate(false);
  modificarci(true);
  auxHistorial(fhistoria.datos, fhistoria.fecha, fhistoria.hora);
}

Una vez hecho esto, puedes añadir un flag para indicar que se ha pulsado:

onFHistoriaClicked(fhistoria) {
  modificate(false);
  modificarci(true);
  auxHistorial(fhistoria.datos, fhistoria.fecha, fhistoria.hora);

  fhistoria.clicked = !fhistoria.clicked; //cada click cambia entre false y true
}

Y añadir la clase CSS que cambia el color dependiendo de este flag:

<div class="col-md-6 card">
  <div class="card-header-submenu">
    <span><i class="fas fa-calendar-alt"></i> Visitas</span> 
  </div>
  <div class="card-body-citas">
    <div *ngFor='let fhistoria of historial' class="visitas mt-1"
        (click)="onFHistoriaClicked(fhistoria)" [ngClass] = "{'pulsado': fhistoria.clicked}">
      <span>{{fhistoria.fecha}} - {{fhistoria.hora}}</span>
    </div>
  </div>
</div>
1

Este hilo ya existe, aunque está en inglés así que te traduzco. Deberías utilizar un índice para cada elemento y así ejecutar el evento sobre ese indice. Sería algo así:

<div *ngFor='let fhistoria of historial; let i = index" [attr.data-index]="i"' class="visitas mt-1" (click)="modificate(false);modificarci(true);auxHistorial(fhistoria.datos,fhistoria.fecha,fhistoria.hora)">
    <span>{{fhistoria.fecha}} - {{fhistoria.hora}}</span>
</div>

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.