我想讓每隔一排有不同的顏色。我不知道我做錯了什么，因為它看起來應該是有效的，但它給我的每一行都涂上了灰色。

我使用的是angular，我有父組件和子組件 在我的父組件中，我將數(shù)據(jù)傳遞給子組件。

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

現(xiàn)在，在子組件中，我獲得了多個帶有數(shù)據(jù)事件數(shù)組，我將這些數(shù)組傳遞給子組件，并用*ngFor遍歷數(shù)據(jù)

在html中，我只顯示數(shù)據(jù)行。

子組件的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>

以下是我在子組件中的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。

您可以使用角度方法:

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

試試類似于-

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

我想你漏掉了一個大括號。