将类应用于 Angular 中的每个 4、5、6 元素答案

【问题标题】：Apply class to every 4,5,6 element in Angular将类应用于 Angular 中的每个 4、5、6 元素
【发布时间】：2020-06-27 04:57:16
【问题描述】：

您好，我想为每个 4、5、6 元素应用一个类，并在之后继续重复。

HTML

<div class="parent-div">
        <div [ngClass]="{'child-div3' : i > 4 }" class="child-div1">
          <div class="arrow-right"></div>
        </div>
        <div class="child-div2">
          <img class="object-fit_contain" [src]="deal.image">
        </div>
      </div>

CSS

.child-div1 {
    margin: none !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    background: white;
    z-index: 2;
}

.child-div3 {
    margin: none !important;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    background: rgb(236, 147, 29);
    z-index: 1;
}

我该怎么做？

编辑：

这是 Stackblitz 代码

https://stackblitz.com/edit/angular-ivy-itn1pc

谢谢。

【问题讨论】：

i 变量从何而来？应该放完整的代码
是的，放置TS文件
你能创建一个stackblitz吗
添加了 stackblitz 代码。但是，@Dewanshu 提供的以下代码确实有效，但我还需要它只选择每 4、5、6 个元素然后重复，所以我需要它选择 10、11、12 和 15、16、17 和很快。假设第一个数字是 1 而不是 0。

标签： html css angular

【解决方案1】：

在您的.ts 文件中添加检查功能

check(i: number) {
        return Math.floor(i / 3) % 2;
}

每次都像这样在check() 函数中传递您的变量i

<div class="parent-div">
<div[ngClass]="check(i)?'child-div3':'child-div1'">
<div class="arrow-right"></div>
    </div>
    <div class="child-div2">
      <img class="object-fit_contain" [src]="deal.image">
    </div>
  </div>

【讨论】：

感谢@Dewanshu 上面的代码有效，但我还需要它也需要它只选择每个 4,5,6 元素然后重复，所以我需要它选择 10,11 ,12 然后是 15,16,17 等等。假设第一个数字是 1 而不是 0。我该怎么做？
我无法理解您想要实现的目标。请详细说明
好的，我有一个 *ngFor 循环遍历一些数据。对于前 3 个 div，我想应用 classA，对于接下来的 3 个，我想应用 classB，然后接下来的 3 个我想回到 classA，我想继续旋转直到循环结束。谢谢，希望清楚。
好的，我现在明白了。我要编辑我的答案，请检查。
是的，这就是我要找的东西，非常感谢@Dewanshu