I have an array of objects that I am iterating with an ngFor. I want pressing the forward or back button to move one review forward or back one. I have two buttons to which I am associating the click event to add one to the id of the array and show the next one. The only thing is that I don't know how to implement the ngIf so that it works correctly. I bring the array through the resolution of the promise when I import the database of my service. I had initially thought of filtering the arr, but I don't think it's necessary.
What I have is the following:
@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>
My database:
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.'
}
]
3.The id variable is initialized to 0 to serve as an index to look up the current opinion within the array.
4.In the html, remove the ngFor and only leave the ngIf to evaluate if the variable has an opinion assigned and display it.
export
class HomeComponent implements OnInit {