Angular5实现日历小时项奇偶行差异化背景色问题

看起来你遇到的核心问题是HTML结构和指令位置不对，导致奇偶样式没作用到预期元素上。我们一步步来修正：

1. 修正HTML结构（关键！） #

你现在把*ngFor放在了<ul>标签上，这会让每个小时都生成一个独立的无序列表，而不是在同一个列表里展示所有小时项。这样even/odd类是加在每个单独的<ul>上，自然达不到你想要的“每个小时项交替颜色”的效果。

把*ngFor移到<li>标签上，让所有小时项都属于同一个<ul>：

<ul class="heure">
  <li *ngFor="let heure of libelleTranche; let even = even; let odd = odd" 
      [ngClass]="{ odd: odd, even: even }">
    {{ heure }} H
  </li>
</ul>

2. 调整LESS样式 #

现在我们需要让样式作用在<li>元素上，同时保持横向排列的效果：

.heure {
  list-style: none; /* 去掉默认的列表圆点 */
  padding: 0; /* 清除默认内边距 */
  li {
    float: left;
    width: 2.5em;
    text-align: center; /* 让小时文本居中，更美观 */
  }
  .even {
    background-color: red;
  }
  .odd {
    background-color: green;
  }
}

3. 额外优化（可选） #

如果你担心浮动导致的布局问题，可以用Flexbox替代float，更现代也更易维护：

.heure {
  list-style: none;
  padding: 0;
  display: flex; /* 使用Flex布局 */
  li {
    width: 2.5em;
    text-align: center;
  }
  .even {
    background-color: red;
  }
  .odd {
    background-color: green;
  }
}

这样调整后，每个小时项会横向排列，并且根据奇偶位置交替显示红色/绿色背景，完美提升视觉辨识度！

内容的提问来源于stack exchange，提问作者geek pédagogique lcms