使奇数行与偶数行颜色不同- Angular和CSS

Question

我想让每一行都是不同的颜色。我不知道我做错了什么，因为它看起来应该工作，但它的颜色我每一行与灰色。

我用的是angular，我有父组件和子组件在父组件中，我将数据传递给子组件。

HTML是

<div class="list-view">
<div *ngFor="let event of allEvents">
<app-event-item
[eventsList]="event"
></app-event-item>
</div>
</div>

和父组件的CSS代码

.list-view {
display: flex;
flex-direction: column;
}

现在在子组件中，我得到了多个带有数据的事件数组，我将其传递给子组件，并使用*ngFor

循环遍历数据在html中，我只显示数据行。

子组件HTML代码:

<div class="list-view">
<img [src]="imageUrl" />
<div class="about">
<h4>
<a>{{ eventsList.title }}</a>
</h4>
</div>
<div class="date">
<p>{{ eventsList.date }}</p>
</div>
<div class="count">
<p>{{ eventsList.count }}</p>
</div>
</div>

下面是我在CHILD组件 中的css代码

.list-view {
display: grid;
grid-template-columns: 300px 45% 1fr 1fr;
align-items: center;
height: 100px;
&:nth-child(odd) {
background-color: #F9F9F9;
}
img {
max-height: 100%;
max-width: 100%;
object-fit: cover;
border-radius: 0.75rem;
}
.about-event {
padding-left: 1rem;
}
}

它使每一行的颜色为#F9F9F9。

Answer 1

你可以使用Angular的方法:

<div class="list-view">
<div *ngFor="let event of allEvents;let odd=odd" 
[style.background-color]="odd?'red':null">
<app-event-item
[eventsList]="event"
></app-event-item>
</div>
</div>

Answer 2

试试-

.list-view {
display: grid;
grid-template-columns: 300px 45% 1fr 1fr;
align-items: center;
height: 100px;
&:nth-child(odd) {
background-color: #F9F9F9; 
}
img {
max-height: 100%;
max-width: 100%;
object-fit: cover;
border-radius: 0.75rem;
}
.about-event {
padding-left: 1rem;
}
}

我想你漏了一个大括号。