2

tengo el siguiente problema:

Lo que hago es llamar al servicio y el "response" me devuelve los objetos a manejar. Así como se ve:

fillColaboradores(){
  let payload = {
    zonas: this.zonas.toString(),
  }
  this.perfilesService.getColaboradores(payload, this.helper.getHeaders())
    .subscribe(response => {
      this.passArray=response;

todo bien hasta allí. Resulta que ese array tiene una propiedad llamada "veces" osea this.passArray.veces la cual me da un número, ese numero yo necesito que cuando sea 1 haga una cosa y cuando sea mayor otra, entonces lo tengo asi:

      for (let i = 0; i < this.passArray.length; i++) {
        console.log("En el índice '" + i + "' hay este valor: " +
            this.passArray[i].veces);
        console.log("para tracking" + this.passArray[i].enTracking);
        if (this.passArray[i].veces == 1) {
          console.log("entro en el igual a uno??");
          this.divControl = false;

        } else {
          console.log("entro en el mayor??");
          this.divControl = true;
        }
      }

    }

  },
  err =>{
    this.spinner.hide();
    this.errorModal.show();
    console.error("error", err)
  });
}

Esto me provoca muchos issues:

  • En la primer carga del servicio solo recorre una vez el array y no los demás índices.

  • Hasta que doy clic en el botón que activa la función, si hace el recorrido completo y me muestra si entro al ==1 o no, peroooo el icono que debe desaparecer/aparecer sigue siendo verdadero.

  • La variable divControl que controla un icono que debe aparecer o desaparecer dependiendo del número, siempre sale como true (osea aparece). Les dejo el elemento que debe desaparecer:

      <ng-container matColumnDef="arrow">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell mat-cell *matCellDef="let element">
          <div *ngIf="divControl">
            <i class="bbva-coronita_unfold" mat-button href="javascript:void(0)" 
              (click)="expandedElement = expandedElement === element ? null : element"                 
              (click)="openCollapse(expandedElement, element)"></i>
          </div>
        </td>
      </ng-container>
    

Espero no sea mucho texto, y puedan ayudarme. Lo que quiero es que haga el recorrido y por cada elemento sepa si mostrar o no el elemento dependiendo del this.passArray.veces

Gracias

7
  • Entiendo que hay una tabla en la cual hay una columna dónde se muestra un ícono que debe desaparecer dependiendo del estado de divControl y divControl es una variable en el componente. Es correcto?
    – Lobos
    el 30 oct. 2020 a las 14:55
  • divControl está tomando el valor de la última iteración. divControl debería ser un arreglo o se puede agregar la propiedad a los elementos del arreglo. el 30 oct. 2020 a las 16:32
  • Si @Lobos es correcto, lo que mencionas.
    – Ana
    el 30 oct. 2020 a las 17:40
  • Para que funcione, divControl debe ser una propiedad de element. Así cada fila tendrá su propio divControl para evaluar si mostrar o no el ícono. Puedes revisar esta pregunta que es un caso muy parecido es.stackoverflow.com/questions/401671/…
    – Lobos
    el 30 oct. 2020 a las 17:42
  • Damian, gracias por la ayuda. Aclaro que divControl es solo la variable que deberia desaparecer el "icono" el detalle es que a pesar de tener una condición este sigue apareciendo siempre no solo cuando es mayor que uno pareciendo que solo toma el ultimo valor de la iteracion.
    – Ana
    el 30 oct. 2020 a las 17:43

1 respuesta 1

1

Puedes mapear la respuesta para agregar la propiedad divControl a cada elemento del arreglo, si la propiedad veces es diferente a 1, divControl será true.

.subscribe(response => {
      this.passArray = response.map(e => {
           // agregar propiedad divControl
           e['divControl'] = e.veces != 1;
           return e;
       });
  }
 

Luego en la vista se evalúa la propiedad divControl del objeto element:

<ng-container matColumnDef="arrow">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell mat-cell *matCellDef="let element">
      <div *ngIf="element.divControl">
        <i class="bbva-coronita_unfold" mat-button href="javascript:void(0)" 
          (click)="expandedElement = expandedElement === element ? null : element"                 
          (click)="openCollapse(expandedElement, element)"></i>
      </div>
    </td>
  </ng-container>

De esa forma cada fila tiene su propio divControl.

1
  • 1
    Gracias @Lobos lo he probado y al parecer es correcto, no sabia que debia asignar a cada "row" su elemento que era por eso que siempre lanzaba true en todos. Más que ayudarme me has enseñado. :D.
    – Ana
    el 30 oct. 2020 a las 20:47

Tu Respuesta

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

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