0

tengo un array de objetos que estoy iterando con un ngFor. Quiero que al pulsar el boton de avance o de retroceso avance una opinion o retroceda una. Tengo dos botones a los que estoy asociando el evento clicar para sumar uno al id del array y que muestre el siguiente. Lo único es que no sé como implementar el ngIf para que funcione correctamente. El array lo traigo a través de la resolución de la promesa cuando importo la bd de mi servicio. Inicalmente había pensado filtrar el arr, pero creo que no es necesario.

Lo que tengo es lo siguiente:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  arrOpiniones: Opinion[] = [];
  id: number;
 

  constructor(private servicioUsuarios: UsuariosService) { 
    this.id = this.arrOpiniones['id']
   
  }

  ngOnInit() {

    this.iniciarArray();
  }

  onCambiarslide(action) {
    switch (action){

      case 'prev': 
      this.id--;
    }
   
  }



  iniciarArray() {

  this.servicioUsuarios.getAllOpiniones()
  .then(arr =>{
    this.arrOpiniones = arr;    
    

  })

  
}


}
<div class="carrousel flex flex-row justify-center items-center">

        <div class="opiniones" *ngFor="let opinion of arrOpiniones; let i = index">

            <div *ngIf="opinion">
                <img [src]="opinion.imagen">

                <h3>{{i}} {{opinion.nombre}}</h3>
                
                <p>{{opinion.texto}}</p>

            </div>

            

        </div>

        <button (click)="onCambiarSlide('prev')"><i class="fas fa-chevron-left"></i></button>
        <button (click)="onCambiarSlide('next')"><i class="fas fa-chevron-right"></i></button>


    </div>

Mi bbdd:

export const OPINIONES: Opinion[] = [

{

    id: 1,
    nombre: 'Juan Alvarez',
    imagen: '../../assets/userOne.png',
    texto: 'La venta a través de secondmac ha sido una muy satisfactoria. Vinieron a recoger el ordenador en el horario acordado y recibí el dinero en mi cuenta en un plazo de 48 horas. Muy contento, la verdad, creo que repetiré.'

},

{
    id: 2,
    nombre: 'Alba Fernandez',
    imagen: '../../assets/userTwo.png',
    texto: 'Oí hablar muy bien de secondmac para la compra de un ordenador mac con confianza, ya que garantizan el buen estado del producto. No puedo estar más satisfecha con el servicio. Entregaron el dispositivo en el horario acordado y he pagado un 35% menos por el un MacBook Pro del 2017.'
}

]

2
  • Estás usando un plugin para mostrar el carrousel?
    – Lobos
    el 3 nov. 2019 a las 14:54
  • Hola, no. Por el momento, sólo quiero desplegar la primera opinion, y una vez pulse el boton avanzar pase a la siguiente.
    – Paula
    el 3 nov. 2019 a las 14:56

1 respuesta 1

0
  1. Crea una variable para guardar la opinión que quieras mostrar
  2. Modifica la función onCambiarSlide para que asigne la opinión actual dentro de la nueva variable.

3.La variable id se inicializa en 0 para que sirva como índice para consultar la opinión actual dentro del arreglo.

4.En el html, remueve el ngFor y solo deja el ngIf para evaluar si la variable tiene asignada una opinión y mostrarla.

export class HomeComponent implements OnInit {

  arrOpiniones: Opinion[] = [];
  opinion: any;
  id: number;


  constructor(private servicioUsuarios: UsuariosService) { 
    this.id = 0;

  }

  ngOnInit() {

    this.iniciarArray();
  }

  onCambiarslide(action) {
    switch (action){

      case 'prev':
         if(--this.id >= 0 ) this.opinion = this.arrOpiniones[this.id];
         break;
      case 'next':
        if(++this.id < this.arrOpiniones.length) this.opinion = this.arrOpiniones[this.id];
         break;
    }

  }



  iniciarArray() {

  this.servicioUsuarios.getAllOpiniones()
  .then(arr =>{
    this.arrOpiniones = arr;    


  })


}


}



<div class="carrousel flex flex-row justify-center items-center">



            <div *ngIf="opinion">
                <img [src]="opinion.imagen">

                <h3>{{i}} {{opinion.nombre}}</h3>

                <p>{{opinion.texto}}</p>

            </div>





        <button (click)="onCambiarSlide('prev')"><i class="fas fa-chevron-left"></i></button>
        <button (click)="onCambiarSlide('next')"><i class="fas fa-chevron-right"></i></button>


    </div>
1
  • Muchas gracias. Funciona perfectamente. Ahora solo hacer que cuando pase de la ultima opinion pase a la primera, a ver si puedo.
    – Paula
    el 3 nov. 2019 a las 16:11

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.