提问人：Alberto Scarsi 提问时间：1/12/2023 更新时间：1/12/2023 访问量：60
如何从json中获取单个元素？
How can I get a single element from a json?
问：
我正在用 angular 创建一个市场，并且我已经创建了市场页面，该页面由使用 mockapi 创建的远程 json 填充。问题是，在主页中，我想显示来自同一 json 的单个项目（可能是随机的），但使用 *ngFor 它会显示所有项目。
这是我的代码：
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>
我希望有人能帮助我！谢谢！
答：
0赞
Sabarish sanjeevi
1/12/2023
#1
使用和迭代使用相同语法的元素。Object.map
1赞
Ricky Gummadi
1/12/2023
#2
如果你只想显示数组中的单个元素（随机），那么你可以使用“Math.floor（Math.random（） * this.nfts.length）”之类的东西从数组中获取一个随机元素并显示该数组。
所以 HTML 看起来像这样
<div class="card cards card-p">
<img src="{{nfts[randomIndex].image}}" class="card-img-top">
<div class="card-body">
<h4 class="nft-title">{{nfts[randomIndex].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>
Javascript的
export class DashboardComponent implements OnInit {
nfts: any;
randomIndex = 0;
constructor(
private http: HttpClient,
) {
}
ngOnInit(): void {
this.getNfts()
}
getNfts() {
this.http.get('https://63bd1526fa38d30d85d88179.mockapi.io/NFT/v1/metadata').subscribe((data) => {
this.nfts = data
this.randomIndex = Math.floor(Math.random() * this.nfts.length)
})
}
}
评论
0赞
Alberto Scarsi
1/12/2023
如果我想显示 json 的 10 个项目都是随机的？我该怎么办？
0赞
Ricky Gummadi
1/13/2023
你可以得到 10 个随机元素，如下所示 this.nfts.sort（（） => Math.random（） - 0.5）.slice（0,10）;
评论
selectedNftget()