CSS应用于错误的对象Angular 8答案

【问题标题】：CSS applied to wrong object Angular 8CSS应用于错误的对象Angular 8
【发布时间】：2020-12-05 00:15:03
【问题描述】：

我在一个数组中接收 15 个对象。我拼接前 6 个并丢弃剩余的。现在在 HTML 中，我有 2 个轮播页面，我在其中为每个对象创建比较卡。轮播为 2 页，每页 3 张卡片（对象）。我只想对第一页的第一张卡片应用不同的 CSS 样式，其余的都是一样的。但是 css 正在应用于两个页面的第一张卡片。 typescript中的逻辑如下：

  this.sixIdeasArray = response; // response is received from API call
   for (let i = 0; i < this.sixIdeasArray.length; i ++ ){
     if (i <3) {
       this.threeOrLess.push(this.sixIdeasArray[i]);
     } else if ((i >= 3 && (i < 6){
       this.uptoSix.push(this.sixIdeasArray[i]);
    }
  }

基本上我将收到的响应存储在sixIdeasArray 中，然后检查长度是否小于3 我将它存储在单独的数组threeOrLess 中，如果它在3 到6 之间我将前三个存储在@987654324 @ 和uptoSix 中的下三个。然后我将这些数组分配给 ideasArray。现在我在轮播底部有指示器来更改页面。这里的逻辑是在第一页将threeOrLess 分配给ideasArray，并将更改事件分配给下一页显示uptoSix

   changePage(){
     this.ideasArray = this.threeOrLess;
   }

   changePage2(){
     this.ideasArray = this.uptoSix;
   }

现在在 HTML 中，我在 ideasArray 上有 for 循环，但它将前三个计划视为一个数组，接下来的三个计划是单独的，因此将 CSS 类应用于每个页面上的第一个对象

<div class="container" *ngFor="let idea of ideasArray; let i = index">
   <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>

现在它应该将其余 5 视为Recommended Idea，并且不应将相同的样式应用于两个页面上的第一个想法。我怎样才能做到这一点？

【问题讨论】：

标签： html css angular typescript angular8

【解决方案1】：

使用任何布尔变量来跟踪（例如-isRecommandedIdea）。检查以下代码：-

在 someComponent.ts 中

isRecommandedIdea: Boolean = false;

changePage(){
this.ideasArray = this.threeOrLess;
isRecommandedIdea = true;
}

changePage2(){
this.ideasArray = this.uptoSix;
isRecommandedIdea = false;
}

在 someComponent.html 中

    <li *ngIf = "(i == 0)&&isRecommandedIdea" 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>

您可能需要根据需要调整上面的 html 代码。

【讨论】：