angular5 的颜色有多奇怪

Question

我，这是我的日历小时模板：

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

我想在 less:

中应用这个 css

.heure{
    li{
        float: left;
        width:2.5em;
    }
}
.even { background-color: red; }
.odd { background-color: green; }

我的结果是：

Lun
  
10 H
11 H
12 H
13 H
14 H
15 H

我会显示时间添加和事件以获得更多可见性我的组件在这里：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heure',
  templateUrl: './heure.component.html',
  styleUrls: ['./heure.component.css']
})
export class HeureComponent implements OnInit {

  trancheDeb = 0;
  trancheFin = 24;
  libelleTranche=new Array(); //calculé fin de tranche - debut de tranche
  constructor() { 
    let plageJour = this.trancheFin - this.trancheDeb;

    for(let i=0;i<plageJour;i++){
      this.libelleTranche.push(i);
    }

    console.log(this.libelleTranche);
  }

}

我必须如何为奇数和活动时间正确涂色？感谢回复:)

Answer 1

even 和 odd 由 ngFor 指令提供的变量基于 currentElement index。对于您的情况，您应该根据 (heure % 2) 计算结果设置 odd & even 值。

<ul class="heure" 
  *ngFor="let heure of libelleTranche" 
  [ngClass]="{ odd: (heure%2 == 0), even: heure %2 == 1 } ">
    <li >{{ heure }} H</li>
</ul>

Demo Here

Answer 2

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

angular5 的颜色有多奇怪

how color odd even with angular5

less

ngfor

angular