:nth-of-type 或与 ngFor 类似

【问题标题】：:nth-of-type or similar with ngFor:nth-of-type 或与 ngFor 类似
【发布时间】：2021-03-31 00:21:22
【问题描述】：

使用 ngFor，我创建了一个循环，在不同颜色的框 (div) 中显示数组的内容。阵列总共有 6 个位置（有时少于 6 个），我想要这六个具有不同背景颜色的框（橙色渐变）。我尝试过 :nth-of-type(1),(2)... 但它们都采用相同的颜色，因为它们最终都标识为 .class-div:nth-of-type(1)

在 Angular 11 中是否有更聪明的方法来做这样的事情？

【问题讨论】：

没试过这个。但我会改为查看 sass list.nth ... sass-lang.com/documentation/values/lists ... 然后有一个颜色列表.. 使用 mod 数学计算 6 种颜色的范围为 0 到 5 的值。跨度>

标签： angular sass

【解决方案1】：

您绝对可以在您的 css 文件中使用 :nth-of-type 来定位 div。

.my-class:nth-of-type(1) {
   background: red;
}

或

您可以将循环的索引添加到类中，从而使其唯一，然后在 css 中定义。

*ngFor="let item of items; let i=index;" ngClass="item-{{i}}"

.item-2 {
   background: blue;
}

Stackblitz - https://stackblitz.com/edit/angular-i6unne?file=src/app/app.component.ts

【讨论】：