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>

我想更少地应用这个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

由:after指令提供的

even和odd变量基于currentElement ngFor。对于您的情况，您应该设置index＆amp; odd值基于even计算结果。

(heure % 2)

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，颜色也有多奇怪

2 个答案: