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.'
}
]