在 html Angular 8 中为第一个显示不同的图标，为剩余的 objects 显示不同的图标

Question

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

<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>

我正在尝试为第一个 object 显示不同的图标（最佳推荐的想法），其余的都将具有相同的图标（推荐的想法）。我该怎么做。从 ideasArray 开始，第一个元素始终是最受推荐的创意，因此它的 header 应该显示一枚奖牌，其余的都应该显示一个大拇指。如何实现？

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;
}
}

Answer 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>

Answer 2

首先*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

在 html Angular 8 中为第一个显示不同的图标，为剩余的 objects 显示不同的图标

Show different icon for first and different icon for remaining objects in html Angular8

html

arrays

typescript

angular

angular8