0

Tengo un ngFor en el cual saco 5 elementos, quiero que al hacer click cambie el color de ese elemento solo, pero no de los demás. Como podría hacerlo?

   <ul>
      <li *ngFor="let fpermisos of permisos | slice:0:5; let i = index">
      <i class="fas fa-check-circle" [ngClass]="{'ver-activado': ver, 'ver-desactivado': !ver}" (click)=Updatever();></i>
      <i class="fas fa-eye" [ngClass]="{'habilitar-activado': habilitar, 'habilitar-desactivado': !habilitar}" (click)=Updatehabilitar();></i> {{fpermisos.titulo}}</li>
   </ul>

Mi componente:

  Updatever() {
    if(this.ver == false) {
      this.ver = true;
    } else {
      this.ver = false;
    }
  }

  Updatehabilitar() {
    if(this.habilitar == false) {
      this.habilitar = true;
    } else {
      this.habilitar = false;
    }
  }

Por más vueltas que le doy no consigo hacerlo Y.Y

2
  • "ver" deberia ser un array con 5 elementos, de tal manera que cuando cambies el estado de una de los elementos hagas this.ver[i] = true/false, donde i es el número de elemento a cambiar. La clase de los elementos i dependerá también de ver[i]
    – ordago
    Commented el 26 sept. 2019 a las 12:36
  • Si yo hago un console.log(this.permisos[0]); me muestra el primer permiso, y así sucesivamente pero no se como implementarlo Commented el 26 sept. 2019 a las 13:51

1 respuesta 1

1

Añade al objeto de los permisos dos atributos: ver y habilitado en los cuales esten en false y las funciones del click que cambien ese valor, ese valor es el que determina el css:

TS

permisos = [
  {
    titulo: "l1",
    visto: false,
    habilitado: false
  },
  {
    titulo: "l2",
    visto: false,
    habilitado: false
  },
  {
    titulo: "l3",
    visto: false,
    habilitado: false
  },
  {
    titulo: "l4",
    visto: false,
    habilitado: false
  }
];

Updatever(permiso) {
  console.log(permiso)
permiso.visto = !permiso.visto
}

Updatehabilitar(permiso) {
  console.log(permiso)
  permiso.habilitado = !permiso.habilitado
}

HTML

   <ul>
      <li *ngFor="let fpermisos of permisos | slice:0:5; let i = index">
      <i class="fas fa-check-circle" [ngClass]="{'visto': fpermisos.visto}" (click)="Updatever(fpermisos)"></i> 
      <i class="fas fa-eye" [ngClass]="{'habiltado': fpermisos.habilitado}" (click)="Updatehabilitar(fpermisos)"> </i> {{fpermisos.titulo}}</li>
   </ul>

CSS

  .visto {
    color: green
  }
  .habiltado {
    color: green
  }

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.