Quiero alternar solo la fila seleccionada, pero no puedo hacer eso.

Verifique todo mi código y la demostración está aquí: https://stackblitz.com/edit/test-trainin-2-gv9glh?file=src%2Fapp%2Fapp.component.scss

Actualmente estoy alternando toda la fila y solo quiero la fila donde se hizo clic.

Aquí 90 líneas de código. Aquí está el comienzo:

  <div class="column-holder" *ngFor="let training of trainingExercises; let i = index;">
   
    <div class="single-exe" [class]="{ 'collapse-row' : collapse}">
      <h1 class="exerciseNameAbsolute"> {{ training.exerciseName }}</h1>
      <i (click)="collapse = !collapse" class="dx-icon-collapse dx-icon-custom-style"></i>
0
bilados 22 ene. 2021 a las 02:23

1 respuesta

La mejor respuesta
<div class="column-holder" *ngFor="let training of trainingExercises; let i = index;">
   
    <div class="single-exe" [class]="{ 'collapse-row' : training.collapse}">
      <h1 class="exerciseNameAbsolute"> {{ training.exerciseName }}</h1>
      <i (click)="training.collapse = !training.collapse" class="dx-icon-collapse dx-icon-custom-style"></i>

Esta es la sugerencia que hice del comentario. Agregue una propiedad collapse a cada una de sus variables training y establezca el valor predeterminado verdadero / falso según el estado en el que desee que comiencen. Cambie su [class] para ver esa variable de ámbito , y cuando hace clic en el elemento que alterna el colapso, alterna esa variable en la variable de entrenamiento.

0
Taplar 21 ene. 2021 a las 23:33