I'm currently working on building a marketplace using Angular. The main marketplace page is already set up and populated with data from a remote JSON file created with mockapi. However, I've encountered an issue when trying to display a single random item from the same JSON file on the homepage - using *ngFor ends up showing all items instead.
Below is a snippet of my code:
export class DashboardComponent implements OnInit {
nfts: any;
constructor(
private http: HttpClient,
) {
}
ngOnInit(): void {
this.getNfts()
}
getNfts() {
this.http.get('https://63bd1526fa38d30d85d88179.mockapi.io/NFT/v1/metadata').subscribe((data) => {
this.nfts = data
})
}
}
// HTML
<div class="card cards card-p" *ngFor="let nft of nfts">
<img src="{{nft.image}}" class="card-img-top">
<div class="card-body">
<h4 class="nft-title">{{nft.name}}</h4>
<a class="nft-collection mb-3" routerLink="/">NFT collection</a>
<p>Price: <span>300</span></p>
<button class="button heart text-end"><i class="fa-solid fa-heart"></i></button>
<a routerLink="/nft-details/:id" class="stretched-link"></a>
</div>
</div>
I would greatly appreciate any assistance with this challenge! Thank you in advance!