0

嗨，我有一个数组 =ideasArray它共有 6 个对象。在 HTML 中，我想针对第一个对象的想法显示不同的图标，并为其余对象显示不同的图标。

<div class="container" *ngIf="let idea of ideasArray">
<ul class="data">
<li class="header"><i class="fas fa-medal"></i>Top Recommended Idea<li>
<li class="header"><i class="fas fa-thumbs-up"></i>Recommended Idea<li>
</ul>
</div>

我正在尝试为第一个对象显示不同的图标（TOP RECOMMENDED IDEA），其余的都将具有相同的图标（RECOMMENDED IDEA）。我该怎么做。从ideasArray第一个元素开始，始终是最佳推荐创意，因此其标题应显示奖牌，其余部分应显示竖起大拇指。如何做到这一点？

for (let j = 0; j < finalData.length; j++){
if(j<3){
this.firstThree.push(this.finalData[j]);
this.receivedData = this.firstThree;
} else if ((j >= 3) && (j <6)) {
this. nextThree.push(this.finalData[j]);
this.receivedData = this.nextThree;
}
}
4

2 回答 2

1

首先*ngIf是根据某些条件显示元素。您需要*ngFor用于迭代或循环

<div class="container" *ngFor="let idea of ideasArray; index as i">
   <ul class="data">
     <li *ngIf = "i == 0" class="header"><i class="fas fa-medal"></i>Top Recommended Idea<li>
    <li *ngIf = "i != 0" class="header"><i class="fas fa-thumbs-up"></i>Recommended Idea<li>
   </ul>
</div>

要了解有关如何使用的更多信息，structural directives请参阅Angular Structural Directive

于 2020-08-14T12:35:47.720 回答
1

最简单的方法是为此目的使用 use ngIf 结构指令。您可以将它与数组的索引一起使用，如下所示：-

<div class="container" *ngFor="let idea of ideasArray; index as i">
<ul class="data">
<li *ngIf = "i == 0" class="header"><i class="fas fa-medal"></i>Top Recommended Idea<li>
<li *ngIf = "i != 0" class="header"><i class="fas fa-thumbs-up"></i>Recommended Idea<li>
</ul>
</div>
于 2020-08-14T12:33:11.567 回答