0

Estoy generando un li con un ngFor por cada experiencia de trabajo que agrega un usuario a un array y estoy usando una etiqueta pre para mostrar un texto respetando el formato con el que se guardo en caso de que se introdujeran saltos de linea, cree un método para cambiar el color del texto que está en esa etiqueta cuando se selecciona el li que le corresponde, en lo que necesito ayuda es en hacer que cuando se seleccione otro li diferente al li del pre que ya se modificó, vuelva a su color original que en este caso eso negro.

Component.html

<li *ngFor="let xp of xpArray; index as i" id="li{{i}}"
    class="list-group-item list-group-item-action flex-column align-items-start"
    (click)="openForEditXP(xp); colorPre(i)" [class.active]="xp == selectedXp">
  <div class="d-flex w-100 justify-content-between">
    <h5 class="mb-1">{{xp.empresa}}</h5>
    <small>De {{xp.fecha_inicio}} a {{xp.fecha_fin == '' ? 
           'Actualmente' : xp.fecha_fin}}</small>
  </div>
  <p class="mb-1">{{xp.puesto}}</p>
  <small class="mb-1">Jefe: {{xp.jefe}} | Tel: {{xp.tel_referencia}}</small>
  <div class="row">
    <p class="col-md-auto font-weight-bold pr-1">Proyectos:</p>
    <pre id="pre{{i}}" class="col pl-0 text-justify">{{xp.proyectos}}</pre>
  </div>
</li>

Component.ts

colorPre(i: number) {
  if (document.getElementById('li'+i).style.background == "#FFFFFF") {
    document.getElementById('pre'+i).style.color = "#000";
  } else {
    document.getElementById('pre'+i).style.color = "#fff";
  }
}

Si no quedó muy clara mi explicación, les diré cómo debe funcionar, cuando yo le doy click a un li, ese se pinta de color negro ya que lo estoy seleccionando y con el método colorPre(i); cambio el color del texto de la etiqueta pre a blanco, ya que originalmente es negro y no se vería, pero cuando seleccione otro li diferente, el texto de la etiqueta pre anterior debe volverse negro otra vez y el de la etiqueta pre que pertenece al nuevo li seleccionado haga el mismo método de pintarse blanco el texto.

2
  • 1
    Lo mejor para poder hacer lo que quieres es que le asignes una clase especifica al li cuando le das click por ejemplo active, crea reglas css para la etiqueta <pre> que esta dentro del li que esté activo despues de hacer click. Y en el evento click lo primero que haces es buscar cualquier li que tenga la clase active y se la quitas, asi solo 1 estara activo a la vez el 27 ago. 2019 a las 19:50
  • Ya se agrega la clase active en el li que selecciono con [class.active]="xp == selectedXp", ¿cómo podría asignarle el estilo al pre dentro del li activo sin que los otros se cambien igual? el 28 ago. 2019 a las 22:02

2 respuestas 2

1

Tomando en cuenta la forma actual como lo estás poniéndole el color al pre, creo que eso simplemente podrías hacerlo de la siguiente manera:

colorPre(i: number) {


  // No sé para qué verificas si el fondo del li es blanco.
  if (document.getElementById('li'+i).style.background == "#FFFFFF") {
    document.getElementById('pre'+i).style.color = "#000";
  } else {
    document.getElementById('pre'+i).style.color = "#fff";
  }

  // preActivoID sería un atributo o propiedad de tu componente no inicializado.

  // Verificas que preActivoID no sea null. (Porque en la primera vez será null)
  if ( preActivoID ) {
    // Si no es null, significa que ya le diste click a 1 LI anteriormente por lo menos.
    // Cambias el pre anterior a negro con ayuda del ID que se guardó antes.
    document.getElementById(preActivoID).style.color = '#000';
  }

  // Vuelves a guardar el id del nuevo pre que está activo..
  preActivoID = 'pre'+i;
}
1
  • Verifico si el fondo del li es blanco porque estaba pensando en usar ese mismo método para cambiarle el color al pre cuando se seleccionara otro li, pero logré realizarlo así, gracias por tu método, me funcionó el 3 sep. 2019 a las 15:11
0

Intenta agregarle al li el css hover

/* Selecciona cualquier elemento <li> cuando está "mantenido (hovered)" */
li:hover {
    color: #fff;
}

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.