Imagine a scenario where you have created a method that captures an array and selects a random position from it. The task at hand is to display one or more of these random positions on the screen. While you have successfully used the *ngFor directive to display all positions of the array, you are now faced with the challenge of figuring out how to specifically display these random positions.
listComics() {
this.comicsService.getComics().subscribe(
comicsList => {
this.comics = comicsList.data.results;
this.rareComics = comicsList.data.results[Math.floor(Math.random() * this.comics.length)]
console.log(this.comics);
});
}
Here is the code snippet showcasing how the array is currently being displayed:
<div class="col-md-3" *ngFor="let comic of comics">
<div class="col">
<img [src]="comic.thumbnail.path + '/portrait_uncanny.' + comic.thumbnail.extension" id="img"
(click)="onSelect(comic)">
</div>
<div class="col">
<h5 class="title">{{comic.title}}</h5>
</div>
</div>