如何从 json 中获取单个元素

我正在创建一个有Angular 的市场，并且我已经创建了Marketplace页面，该页面由一个用moackapi创建的远程json填充.问题是，在主页上，我想要显示来自相同JSON的单个项目(可能是随机的)，但与*NG一起显示所有项目.

这是我的代码:

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>

我希望有人能帮助我！谢谢!